@props(['model', 'label' => null, 'hint' => null])
<label class="flex cursor-pointer items-center justify-between gap-4 py-2.5">
    <span class="min-w-0">
        @if ($label)<span class="block text-sm font-medium text-slate-200">{{ $label }}</span>@endif
        @if ($hint)<span class="block text-xs text-slate-500">{{ $hint }}</span>@endif
    </span>
    <span class="relative inline-flex shrink-0 items-center">
        <input type="checkbox" wire:model.live="{{ $model }}" class="peer sr-only">
        <span class="h-6 w-11 rounded-full bg-edge transition-colors peer-checked:bg-brand peer-focus-visible:ring-2 peer-focus-visible:ring-brand/40"></span>
        <span class="pointer-events-none absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-5"></span>
    </span>
</label>