@props([
    'icon',
    'label',
    'value' => null,
    'href' => null,
])

<div {{ $attributes->merge(['class' => 'flex items-start gap-4 rounded-xl border border-brand-border bg-brand-white p-5']) }}>
    <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-brand-primary/10 text-brand-primary">
        <x-icon :name="$icon" class="h-5 w-5" />
    </span>

    <span class="flex flex-col gap-1">
        <span class="text-xs font-semibold uppercase tracking-wide text-brand-muted">{{ $label }}</span>

        @if ($value)
            <a href="{{ $href }}" class="text-base font-medium text-brand-ink transition-colors hover:text-brand-primary">
                {{ $value }}
            </a>
        @else
            <span class="inline-flex w-fit items-center rounded-full bg-brand-surface px-2.5 py-1 text-xs font-medium text-brand-muted">
                À renseigner
            </span>
        @endif
    </span>
</div>
