{{--
    Toggle/Switch Component - shadcn-style
    
    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']) }}>
    @if($label || $description)
        <div class="space-y-0.5">
            @if($label)
                <span class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{{ $label }}</span>
            @endif
            @if($description)
                <p class="text-[0.8rem] text-muted-foreground">{{ $description }}</p>
            @endif
        </div>
    @endif
    
    <div class="relative">
        <input
            type="checkbox"
            {{ $attributes->whereDoesntStartWith('class')->merge(['disabled' => $disabled]) }}
            class="sr-only peer"
        />
        <div @class([
            'inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-150',
            'bg-input peer-checked:bg-primary',
            'peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background',
            'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        ])></div>
        <div @class([
            'pointer-events-none absolute top-0.5 left-0.5 block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform duration-150',
            'peer-checked:translate-x-4',
        ])></div>
    </div>
</label>