<template>
    <div class="flex items-center justify-between">
        <span class="text-sm text-gray-700 dark:text-gray-300">{{ label }}</span>
        <button
            type="button"
            role="switch"
            :aria-checked="value"
            :class="[
                value ? 'bg-green-500' : 'bg-gray-300 dark:bg-gray-600',
                'relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2'
            ]"
            @click="$emit('update', !value)"
        >
            <span
                :class="[
                    value ? 'translate-x-4' : 'translate-x-0',
                    'pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
                ]"
            />
        </button>
    </div>
</template>

<script setup>
defineProps({
    label: {
        type: String,
        required: true
    },
    value: {
        type: Boolean,
        required: true
    }
});

defineEmits(['update']);
</script>
