@props([
    'name' => 'is_active',
    'checked' => true,
    'activeLabel' => 'Active',
    'inactiveLabel' => 'Deactive',
])

<div
    class="inline-flex cursor-pointer select-none items-center gap-3"
    x-data="{ on: @js((bool) $checked) }"
>
    {{-- Always submit 0 or 1 so deactive is saved in the database --}}
    <input type="hidden" name="{{ $name }}" :value="on ? '1' : '0'">

    <button
        type="button"
        class="relative inline-flex h-6 w-11 shrink-0 rounded-full transition"
        :class="on ? 'bg-emerald-500' : 'bg-slate-300'"
        @click.prevent="on = !on"
        role="switch"
        :aria-checked="on.toString()"
    >
        <span
            class="pointer-events-none absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition"
            :class="on ? 'translate-x-5' : 'translate-x-0'"
        ></span>
    </button>
    <span
        class="text-sm font-medium"
        :class="on ? 'text-emerald-700' : 'text-slate-500'"
        x-text="on ? @js($activeLabel) : @js($inactiveLabel)"
    ></span>
</div>