<template>
<button
  class="relative w-12 h-6 rounded-full transition-colors"
  :class="modelValue ? 'bg-blue-500' : 'dark:bg-gray-600 bg-gray-300'"
  @click="$emit('update:modelValue', !modelValue)"
>
    <span
      class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform"
      :class="modelValue ? 'translate-x-6' : ''"
    ></span>
  </button>
</template>

<script setup lang="ts">
defineProps<{
  modelValue: boolean
}>()

defineEmits<{
  (e: 'update:modelValue', value: boolean): void
}>()
</script>
