{{-- A switch, M3's: a 52×32 track whose handle grows and slides across when it turns on.

     On a real checkbox with `role="switch"`, so it is focusable, announced as on or off, and takes
     Space from the keyboard; the handle is drawn beside it. `label` and `hint` sit beside it and are
     its name — a switch without `label` needs an `aria-label`. `right` puts it at the end of the
     row, where a setting's switch usually is. `icons` draws a check on the handle when on and a
     cross when off; `icons="selected"` only the check. Every other attribute reaches the `<input>`
     (resources/css/components/selection.css). --}}

@props([
    'label' => null,
    'hint' => null,
    'right' => false,
    'icons' => false,
])

@php
    $model = $attributes->whereStartsWith('wire:model')->first();
    $id = $attributes->get('id') ?? 'switch-'.substr(md5($model.'|'.$label), 0, 12);
    $icons = $icons === 'selected' ? 'selected' : ($icons ? 'both' : null);
@endphp

<div {{ $attributes->only(['class', 'wire:key'])->class(['min-w-0']) }}>
    <label for="{{ $id }}" data-selection @class([
        'flex gap-4',
        'items-start' => filled($hint),
        'items-center' => blank($hint),
        'flex-row-reverse justify-between' => $right,
    ])>
        <span data-switch @if ($icons) data-icons="{{ $icons }}" @endif>
            <input
                {{ $attributes->except(['class', 'id', 'wire:key']) }}
                id="{{ $id }}"
                type="checkbox"
                role="switch"
            />
            <span data-handle>
                @if ($icons)
                    <x-icon name="check" class="size-4" data-on />
                    <x-icon name="close" class="size-4" data-off />
                @endif
            </span>
        </span>

        @if (filled($label) || filled($hint))
            <span class="min-w-0">
                @if (filled($label))
                    <span class="block type-body-lg text-on-surface" data-selection-label>{{ $label }}</span>
                @endif
                @if (filled($hint))
                    <span class="mt-0.5 block type-body-sm text-on-surface-variant">{{ $hint }}</span>
                @endif
            </span>
        @endif
    </label>
</div>