{{--
    Toggle/Switch Component - LucentUI Theme
    Migrated from AdminLTE to Tailwind
    
    Usage:
    <x-proxmox::ui.toggle wire:model="enabled" label="Enable Feature" />
--}}

@props([
    'label' => null,
    'description' => null,
    'disabled' => false,
])

<label {{ $attributes->only('class')->class([
    'flex items-center justify-between gap-4 cursor-pointer',
    'cursor-not-allowed opacity-65' => $disabled,
]) }}>
    @if($label || $description)
        <div class="flex flex-col gap-0.5">
            @if($label)
                <span class="text-sm font-medium text-secondary">{{ $label }}</span>
            @endif
            @if($description)
                <p class="text-xs text-secondary/80">{{ $description }}</p>
            @endif
        </div>
    @endif
    
    <div class="relative shrink-0">
        <input
            type="checkbox"
            {{ $attributes->whereDoesntStartWith('class')->merge(['disabled' => $disabled]) }}
            class="peer sr-only"
        />
        <div class="w-11 h-6 bg-neutral/40 rounded-full border-2 border-transparent transition-colors duration-200 peer-checked:bg-primary peer-focus-visible:ring-2 peer-focus-visible:ring-primary/25 peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
        <div class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-sm transition-transform duration-200 peer-checked:translate-x-5 pointer-events-none"></div>
    </div>
</label>