@props(['name' => '', 'label' => '', 'value' => false, 'disabled' => false, 'size' => 'md'])

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

<label class="inline-flex items-center gap-3 cursor-pointer {{ $disabled ? 'opacity-50 cursor-not-allowed' : '' }}">
    <div class="relative" x-data="{ on: {{ $value ? 'true' : 'false' }} }">
        <input type="hidden" name="{{ $name }}" :value="on ? '1' : '0'" {{ $disabled ? 'disabled' : '' }}>
        <button
            type="button"
            role="switch"
            :aria-checked="on.toString()"
            @click="{{ $disabled ? '' : 'on = !on' }}"
            class="{{ $s['toggle'] }} rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
            :class="on ? 'bg-primary-600' : 'bg-slate-300 dark:bg-slate-600'"
            {{ $disabled ? 'disabled' : '' }}
        >
            <span
                class="absolute top-0.5 left-0.5 {{ $s['dot'] }} bg-white rounded-full shadow-sm transition-transform duration-200"
                :class="on ? '{{ $s['translate'] }}' : 'translate-x-0'"
            ></span>
        </button>
    </div>
    @if($label)
        <span class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ $label }}</span>
    @endif
</label>