{{--
    Component: x-store.filter-chip
    Usage:
        <x-store.filter-chip :active="$var === 'value'" wire:click="$set('var','value')">
            Label
        </x-store.filter-chip>

    Props:
        $active  — bool, apakah chip ini aktif
        $icon    — (opsional) SVG path string untuk icon
--}}
@props([
    'active' => false,
    'icon'   => null,
])

<button type="button"
    {{ $attributes->merge([
        'class' => 'shrink-0 h-9 px-4 rounded-full text-xs font-medium border
                   transition-colors duration-150 whitespace-nowrap inline-flex items-center gap-1.5
                   ' . ($active
                       ? 'bg-orange-500 text-white border-orange-500'
                       : 'bg-white text-slate-600 border-slate-200 hover:border-orange-300 hover:text-slate-800')
    ]) }}>
    @if ($icon)
        <svg class="w-3.5 h-3.5" viewBox="0 0 20 20"
             fill="{{ $active ? 'currentColor' : 'none' }}"
             stroke="{{ $active ? 'none' : 'currentColor' }}"
             stroke-width="1.5">
            <path d="{{ $icon }}"/>
        </svg>
    @endif
    {{ $slot }}
</button>