<template>
  <label class="switch">
    <input type="checkbox" :checked="modelValue" @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)">
    <span class="track"><span class="thumb"></span></span>
  </label>
</template>

<script setup lang="ts">
defineProps<{ modelValue: boolean }>()
defineEmits<{ 'update:modelValue': [value: boolean] }>()
</script>

<style scoped>
.switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.switch input { display: none; }
.switch .track {
  position: absolute; inset: 0;
  background: var(--toggle-track);
  border-radius: 10px; cursor: pointer; transition: background 0.2s;
}
.switch .thumb {
  position: absolute; width: 14px; height: 14px; top: 3px; left: 3px;
  background: var(--toggle-thumb);
  border-radius: 50%; transition: all 0.2s; pointer-events: none;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track .thumb { transform: translateX(16px); background: var(--text-strong); }
</style>
