<script setup lang="ts">
/**
 * Checkbox — square toggle; checked/indeterminate state carries the live game accent.
 * v-model binds to boolean checked state via defineModel<boolean>().
 * The hidden <input type="checkbox"> drives CSS :checked/:indeterminate/:focus-visible/:disabled.
 */
import Icon from '@/components/ds/core/Icon.vue'

const props = withDefaults(
  defineProps<{
    label?: string
    disabled?: boolean
    id?: string
  }>(),
  { disabled: false },
)

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

<template>
  <label class="cc-check" :for="id">
    <input
      type="checkbox"
      :id="id"
      :checked="model"
      :disabled="disabled"
      @change="model = ($event.target as HTMLInputElement).checked"
    />
    <span class="cc-check__box">
      <Icon name="check" :size="12" :stroke-width="3" />
    </span>
    <span v-if="label" class="cc-check__label">{{ label }}</span>
  </label>
</template>

<style>
.cc-check { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.cc-check input { position:absolute; opacity:0; width:0; height:0; }
.cc-check__box {
  width:17px; height:17px; flex:none; border-radius:var(--radius-xs); background:var(--surface-inset);
  box-shadow: inset 0 0 0 1px var(--border-strong); display:flex; align-items:center; justify-content:center;
  color:transparent; transition:var(--transition-colors);
}
.cc-check input:checked + .cc-check__box { background:var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color:var(--accent-contrast); }
.cc-check input:indeterminate + .cc-check__box { background:var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color:var(--accent-contrast); }
.cc-check input:focus-visible + .cc-check__box { box-shadow: var(--focus-ring); }
.cc-check input:disabled + .cc-check__box { opacity:.5; }
.cc-check__label { font-size:var(--text-sm); color:var(--text-primary); }
</style>
