{{--
    Toggle Switch Component
    Props:
      $name, $label, $checked, $hint, $disabled, $size (sm|md|lg)
--}}
@props([
    'name'     => '',
    'label'    => '',
    'checked'  => false,
    'hint'     => '',
    'disabled' => false,
    'size'     => 'md',
])

@php
    $sizes = [
        'sm' => ['toggle' => 'w-8 h-4',  'dot' => 'h-3 w-3', 'translate' => 'translate-x-4'],
        'md' => ['toggle' => 'w-11 h-6', 'dot' => 'h-5 w-5', 'translate' => 'translate-x-5'],
        'lg' => ['toggle' => 'w-14 h-7', 'dot' => 'h-6 w-6', 'translate' => 'translate-x-7'],
    ];
    $s = $sizes[$size] ?? $sizes['md'];
@endphp

<div
    x-data="{ enabled: {{ old($name, $checked) ? 'true' : 'false' }} }"
    class="flex items-center gap-3"
>
    <input type="hidden" name="{{ $name }}" :value="enabled ? '1' : '0'" />

    <button
        type="button"
        @click="{{ $disabled ? '' : 'enabled = !enabled' }}"
        :aria-checked="enabled.toString()"
        role="switch"
        {{ $disabled ? 'disabled' : '' }}
        :class="enabled
            ? 'bg-primary-600'
            : 'bg-surface-300 dark:bg-surface-600'"
        class="{{ $s['toggle'] }} relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent
               transition-colors duration-200 ease-in-out
               focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
               {{ $disabled ? 'opacity-60 cursor-not-allowed' : '' }}
               dark:focus:ring-offset-surface-900"
    >
        <span
            :class="enabled ? '{{ $s['translate'] }}' : 'translate-x-0'"
            class="{{ $s['dot'] }} inline-block transform rounded-full bg-white shadow-sm transition duration-200 ease-in-out"
        ></span>
    </button>

    @if($label || $hint)
        <div>
            @if($label)
                <span class="text-sm font-medium text-surface-700 dark:text-surface-300 {{ $disabled ? 'opacity-60' : '' }}">
                    {{ $label }}
                </span>
            @endif
            @if($hint)
                <p class="mt-1.5 text-xs text-muted-foreground">{{ $hint }}</p>
            @endif
        </div>
    @endif
</div>