@props([
    'name',
    'url',
])

<a href="{{ url($url) }}"
   target="_blank"
   rel="noopener noreferrer"
   class="group flex items-center justify-between no- gap-4 rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm no-underline transition hover:border-blue-300 hover:bg-slate-50 hover:shadow-md"
>
    <div class="flex items-center gap-3 min-w-0">
        <i class="fa-regular fa-file-pdf text-red-600 text-lg flex-shrink-0"></i>

        <span class="truncate text-sm font-medium text-blue-500">
            {{ $name }}
        </span>
    </div>

    <span class="inline-flex items-center rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-blue-500 transition hover:bg-slate-50 flex-shrink-0">
        Download
    </span>
</a>