@props(['active' => false, 'label' => null])

@php
$classes = $active
            ? 'inline-flex h-9 min-w-0 items-center justify-center gap-1.5 rounded-full bg-gradient-to-r from-rose-600 to-pink-600 text-white shadow-md shadow-rose-600/25 max-lg:w-9 lg:px-3.5 [&>i]:shrink-0'
            : 'inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-600 ring-1 ring-gray-200 transition-colors hover:bg-rose-50 hover:text-rose-700 dark:text-gray-300 dark:ring-neutral-700 dark:hover:bg-rose-950/30 dark:hover:text-rose-300';
@endphp

<a {{ $attributes->merge(['class' => $classes]) }} @if ($label && ! $active) title="{{ $label }}" @endif>
    {{ $slot }}

    @if ($active && $label)
        <span class="hidden truncate text-sm font-semibold lg:inline-flex">{{ $label }}</span>
    @endif
</a>