@props(['icon', 'title', 'description', 'id'])

<a href="#{{ $id }}" class="no-underline">
    <div class="h-full rounded-lg border border-gray-200 bg-white shadow-sm hover:shadow-md transition-shadow cursor-pointer p-6 flex flex-col">
        <div class="bg-primary/10 rounded-full p-2 w-10 h-10 flex items-center justify-center mb-4">
            <x-ui.icon name="{{ $icon }}" class="h-5 w-5 text-primary" />
        </div>
        <h3 class="text-lg font-semibold mb-2">{{ $title }}</h3>
        <p class="text-gray-600 text-sm mb-4">{{ $description }}</p>
        <div class="flex items-center text-primary text-sm mt-auto">
            View Questions
            <x-ui.icon name="chevron-right" class="h-4 w-4 ml-1" />
        </div>
    </div>
</a>