<template>
    <Switch :model-value="modelValue" @update:modelValue="emit('update:modelValue', $event)" :class="[
        modelValue ? activeClasses : inactiveClasses,
        'relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ui-not-focusable',
    ]">
        <span aria-hidden="true" :class="[
            modelValue ? 'translate-x-6' : 'translate-x-1',
            'inline-block h-4 w-4 transform rounded-full bg-white transition',
        ]" />
    </Switch>
</template>

<script setup lang="ts">
import { Switch } from '@headlessui/vue'

const props = defineProps<{ modelValue: boolean; color?: 'primary' | 'success' | 'danger' }>()
const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()

const activeColorMap = {
    primary: 'bg-primary',
    success: 'bg-success',
    danger: 'bg-danger',
}

const activeClasses = activeColorMap[props.color ?? 'primary']
const inactiveClasses = 'bg-neutral/40'
</script>