<script setup>
const props = defineProps({
    modelValue: { type: Boolean, default: false },
    label: { type: String, required: true },
    description: { type: String, default: '' },
    disabled: { type: Boolean, default: false },
})

const emit = defineEmits(['update:modelValue'])

const toggle = () => {
    if (props.disabled) return
    emit('update:modelValue', !props.modelValue)
}
</script>

<template>
    <div
        class="flex items-start justify-between gap-4 rounded-lg border border-slate-200 bg-white p-4 transition hover:border-slate-300"
        :class="disabled ? 'opacity-60' : ''"
    >
        <div class="min-w-0 flex-1">
            <p class="text-sm font-medium text-slate-900">{{ label }}</p>
            <p v-if="description" class="mt-1 text-xs text-slate-500">{{ description }}</p>
        </div>
        <button
            type="button"
            role="switch"
            :aria-checked="modelValue"
            :disabled="disabled"
            @click="toggle"
            :class="[
                'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2',
                modelValue ? 'bg-emerald-500' : 'bg-slate-300',
                disabled ? 'cursor-not-allowed' : '',
            ]"
        >
            <span
                :class="[
                    'inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition-transform',
                    modelValue ? 'translate-x-5' : 'translate-x-0.5',
                ]"
            ></span>
        </button>
    </div>
</template>
