@props([
    /** Current active state. */
    'active' => false,
    /** Livewire method call to run on click, e.g. "toggleActive(5)". Resolved against the parent Livewire component. */
    'click' => '',
])

{{--
    Inline active/inactive switch for catalog list rows. Renders a real switch-style
    control whose click runs a Livewire method on the parent component. `wire:click`
    inside an anonymous Blade component compiles inline, so it binds to the parent
    Livewire component that owns `$click`.
--}}
<button
    type="button"
    role="switch"
    aria-checked="{{ $active ? 'true' : 'false' }}"
    wire:click="{{ $click }}"
    wire:loading.attr="disabled"
    {{ $attributes->class([
        'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500/50',
        'bg-emerald-500' => $active,
        'bg-zinc-300 dark:bg-zinc-600' => ! $active,
    ]) }}
>
    <span class="sr-only">{{ $active ? __('Active — click to deactivate') : __('Inactive — click to activate') }}</span>
    <span class="{{ $active ? 'translate-x-4.5' : 'translate-x-0.5' }} inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"></span>
</button>