@props(['active', 'label', 'icon' => '', 'iconClasses' => null, 'counter' => null])

@php
$classes = 'quick-action flex flex-col justify-center items-center space-y-2 w-1/3 p-4 hover:bg-gray-100 transition relative';
$classes .= ' ' . $attributes['class'] ?? '';
$classes .= isset($active) && $active ? ' bg-gray-100' : '';
@endphp

<a {{ $attributes->merge(['class' => $classes]) }}>
    @if (!empty($icon))
        <span class="relative">
            <img src="{{ $icon }}" alt="" class="h-10 {{ $iconClasses ?? '' }}" loading="lazy">
            @if (isset($counter) && $counter > 0)
                <span
                    class="absolute -top-1 -right-1 px-1 rounded-full bg-primary text-white flex items-center justify-center text-xs font-bold shadow-sm">{{ $counter }}</span>
            @endif
        </span>
    @endif
    <span class="text-xs">{{ $label }}</span>
    @if (isset($active) && $active)
        <span class="absolute bottom-0 left-0 right-0 h-1 bg-primary"></span>
    @endif
</a>