@props([
    // Server-rendered state, for a switch driven by a Livewire action.
    'on' => false,
    // An Alpine expression, for a switch whose state lives in the browser
    // (e.g. `s.sound`). When given it wins: the colours become bindings rather
    // than being baked in at render time.
    'alpine' => null,
    // The accessible name. A switch with no label is a mystery to a screen
    // reader, because the only thing near it is usually loose text.
    'label' => '',
])

@php
    // Tailwind reads these files as plain text, so both states have to appear
    // written out somewhere for the classes to be emitted at all.
    $track = $alpine ? '' : ($on ? 'bg-indigo-600' : 'bg-slate-200');
    $knob = $alpine ? '' : ($on ? 'translate-x-5' : 'translate-x-0');
@endphp

{{--
    The bare track-and-knob of a switch, with no label or layout of its own.

    It exists because <x-settings.toggle> — the labelled row used all over the
    Settings page — is welded to `wire:model`, and not every switch has a
    property to bind to: some fire a Livewire action per row, some flip a
    browser-side preference that never reaches the server at all. Rather than
    hand-rolling a lookalike each time and letting the two drift apart, the look
    lives here and both kinds use it.

    Anything you pass through lands on the <button>, so the caller supplies the
    behaviour: `wire:click="toggleSound(4)"`, or `@click="toggleSound()"`.

    Keep the geometry identical to <x-settings.toggle>: h-6 w-11 track, h-5 w-5
    knob, translate-x-5 of travel, indigo when on.
--}}
<button
    type="button"
    role="switch"
    aria-label="{{ $label }}"
    @if ($alpine)
        :aria-checked="{{ $alpine }} ? 'true' : 'false'"
        :class="{{ $alpine }} ? 'bg-indigo-600' : 'bg-slate-200'"
    @else
        aria-checked="{{ $on ? 'true' : 'false' }}"
    @endif
    {{ $attributes->merge(['class' => 'relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 focus-visible:ring-offset-2 '.$track]) }}
>
    <span
        aria-hidden="true"
        class="pointer-events-none ml-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform {{ $knob }}"
        @if ($alpine) :class="{{ $alpine }} ? 'translate-x-5' : 'translate-x-0'" @endif
    ></span>
</button>