@props([
    'model',
    'label',
    'description' => null,
    'icon' => null,
])

<label {{ $attributes->merge(['class' => 'flex cursor-pointer items-start justify-between gap-4']) }}>
    <span class="flex items-start gap-3">
        @if ($icon)
            <span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-slate-50 text-slate-500">
                <x-icon :name="$icon" class="h-5 w-5" />
            </span>
        @endif
        <span class="min-w-0">
            <span class="block text-sm font-medium text-slate-900">{{ $label }}</span>
            @if ($description)
                <span class="mt-0.5 block text-sm text-slate-500">{{ $description }}</span>
            @endif
        </span>
    </span>

    <span class="relative mt-0.5 inline-flex h-6 w-11 shrink-0 items-center">
        <input type="checkbox" wire:model="{{ $model }}" class="peer sr-only" />
        <span class="h-6 w-11 rounded-full bg-slate-200 transition-colors peer-checked:bg-indigo-600 peer-focus-visible:ring-2 peer-focus-visible:ring-indigo-300"></span>
        <span class="absolute left-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-5"></span>
    </span>
</label>