@props([
    'icon',
    'title',
    'description',
    'href',
    'accent' => 'blue',
])

@php
    $badgeClasses = match ($accent) {
        'gold' => 'bg-brand-gold/15 text-brand-gold-dark',
        'green' => 'bg-brand-green/15 text-brand-green',
        default => 'bg-brand-primary/10 text-brand-primary',
    };
@endphp

<a
    href="{{ $href }}"
    {{ $attributes->merge(['class' => 'lift-on-hover group flex flex-col gap-4 rounded-xl border border-brand-border bg-brand-white p-6']) }}
>
    <span class="flex h-12 w-12 items-center justify-center rounded-lg {{ $badgeClasses }}">
        <x-icon :name="$icon" class="h-6 w-6" />
    </span>

    <span class="flex flex-col gap-2">
        <span class="text-lg font-semibold text-brand-ink">{{ $title }}</span>
        <span class="text-sm leading-relaxed text-brand-muted">{{ $description }}</span>
    </span>

    <span class="mt-auto inline-flex items-center gap-1.5 text-sm font-semibold text-brand-primary">
        En savoir plus
        <x-icon name="chevron-right" class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
    </span>
</a>
