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

<div x-data="{ enabled: @js((bool) $checked) }" class="flex items-start justify-between gap-4">
    <div>
        @if($label)
            <p class="text-sm font-medium text-slate-700 dark:text-slate-200">{{ $label }}</p>
        @endif

        @if($description)
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ $description }}</p>
        @endif
    </div>

    <div class="shrink-0">
        <input type="hidden" name="{{ $name }}" :value="enabled ? 1 : 0">
        <button
            type="button"
            @click="enabled = !enabled"
            :class="enabled ? 'bg-primary-500' : 'bg-slate-300 dark:bg-slate-600'"
            class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
            role="switch"
            :aria-checked="enabled.toString()"
        >
            <span
                :class="enabled ? 'translate-x-6' : 'translate-x-1'"
                class="inline-block h-5 w-5 rounded-full bg-white shadow transition-transform duration-200"
            ></span>
        </button>
    </div>
</div>