<script setup lang="ts">
/**
 * Switch — toggle control; checked state carries the live game accent.
 * v-model binds to boolean checked state via defineModel<boolean>().
 * The hidden <input type="checkbox"> drives CSS :checked/:focus-visible/:disabled.
 */
const props = withDefaults(
  defineProps<{
    label?: string
    size?: 'md' | 'sm'
    disabled?: boolean
    id?: string
  }>(),
  { size: 'md', disabled: false },
)

const model = defineModel<boolean>()
</script>

<template>
  <label
    :class="['cc-switch', size === 'sm' && 'cc-switch--sm']"
    :for="id"
  >
    <input
      type="checkbox"
      :id="id"
      :checked="model"
      :disabled="disabled"
      @change="model = ($event.target as HTMLInputElement).checked"
    />
    <span class="cc-switch__track">
      <span class="cc-switch__thumb" />
    </span>
    <span v-if="label" class="cc-switch__label">{{ label }}</span>
  </label>
</template>

<style>
.cc-switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.cc-switch input { position:absolute; opacity:0; width:0; height:0; }
.cc-switch__track {
  position:relative; width:36px; height:20px; border-radius:var(--radius-pill); flex:none;
  background:var(--surface-active); box-shadow: inset 0 0 0 1px var(--border-default);
  transition: background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.cc-switch__thumb {
  position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:var(--text-secondary); transition: transform var(--dur-base) var(--ease-emphasized), background var(--dur-base);
}
.cc-switch input:checked + .cc-switch__track { background:var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
.cc-switch input:checked + .cc-switch__track .cc-switch__thumb { transform:translateX(16px); background:var(--accent-contrast); }
.cc-switch input:focus-visible + .cc-switch__track { box-shadow: var(--focus-ring); }
.cc-switch input:disabled + .cc-switch__track { opacity:.5; }
.cc-switch__label { font-size:var(--text-sm); color:var(--text-primary); }
.cc-switch--sm .cc-switch__track { width:30px; height:17px; }
.cc-switch--sm .cc-switch__thumb { width:13px; height:13px; }
.cc-switch--sm input:checked + .cc-switch__track .cc-switch__thumb { transform:translateX(13px); }
</style>
