@props([
    'label',
    'icon'     => 'chart',
    'href'     => null,
    'tone'     => 'brand',
    'disabled' => false,
    'reason'   => null,     // shown as a tooltip when disabled
])

@php
    $tones = [
        'brand'   => 'bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400',
        'ok'      => 'bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400',
        'warn'    => 'bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400',
        'info'    => 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400',
        'muted'   => 'bg-slate-100 text-slate-500 dark:bg-slate-700/40 dark:text-slate-400',
    ];
    $t = $disabled ? $tones['muted'] : ($tones[$tone] ?? $tones['brand']);
@endphp

@if ($disabled)
    {{-- Rendered as a non-interactive element rather than a dead link, so
         keyboard users do not tab to something that cannot act. --}}
    <div class="surface flex cursor-not-allowed flex-col items-center gap-2 p-4 opacity-50"
         title="{{ $reason ?? 'Not available yet' }}"
         aria-disabled="true">
        <span class="grid size-10 place-items-center rounded-xl {{ $t }}">
            <x-icon :name="$icon" class="size-5" />
        </span>
        <span class="text-center text-xs font-medium leading-tight text-slate-500 dark:text-slate-400">{{ $label }}</span>
    </div>
@else
    <a href="{{ $href }}"
       class="surface surface-hover group flex flex-col items-center gap-2 p-4 focus-visible:ring-2 focus-visible:ring-brand-500">
        <span class="grid size-10 place-items-center rounded-xl {{ $t }} transition group-hover:scale-110">
            <x-icon :name="$icon" class="size-5" />
        </span>
        <span class="text-center text-xs font-medium leading-tight text-slate-700 dark:text-slate-200">{{ $label }}</span>
    </a>
@endif