@props(['label' => null, 'hint' => null])

<label class="flex cursor-pointer items-start gap-3">
    <span class="relative mt-0.5 inline-flex h-5 w-9 shrink-0 items-center">
        <input type="checkbox" {{ $attributes->merge(['class' => 'peer sr-only']) }}>
        <span class="h-5 w-9 rounded-full bg-slate-300 transition peer-checked:bg-[var(--tx-primary)] dark:bg-slate-700"></span>
        <span class="absolute left-0.5 h-4 w-4 rounded-full bg-white transition peer-checked:translate-x-4"></span>
    </span>

    <span class="min-w-0">
        @if ($label)
            <span class="block text-sm font-medium text-slate-700 dark:text-slate-200">{{ $label }}</span>
        @endif
        @if ($hint)
            <span class="block text-xs text-slate-500 dark:text-slate-400">{{ $hint }}</span>
        @endif
    </span>
</label>