@props([
    'action',
    'active' => true,
    'activeLabel' => 'Active',
    'inactiveLabel' => 'Deactive',
])

<form method="POST" action="{{ $action }}" class="inline-flex">
    @csrf
    <button
        type="submit"
        class="inline-flex cursor-pointer select-none items-center gap-2.5"
        title="{{ $active ? 'Set deactive' : 'Set active' }}"
    >
        <span class="relative inline-flex h-6 w-11 shrink-0 rounded-full transition {{ $active ? 'bg-emerald-500' : 'bg-slate-300' }}">
            <span class="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white shadow transition {{ $active ? 'translate-x-5' : 'translate-x-0' }}"></span>
        </span>
        <span class="text-xs font-medium {{ $active ? 'text-emerald-700' : 'text-slate-500' }}">
            {{ $active ? $activeLabel : $inactiveLabel }}
        </span>
    </button>
</form>