<script setup lang="ts">
import type { Item } from './index'

const props = defineProps<{
  items: Item[]
  useFlex?: boolean
}>()

const model = defineModel<string[]>()
const checks: Record<string, any> = ref({})

model.value = []
props.items.forEach((item) => {
  checks.value[item.value] = item.checked || false
})

watch(checks, () => {
  const list: string[] = []
  Object.keys(checks.value).forEach((key) => {
    if (checks.value[key]) {
      list.push(key)
    }
  })
  model.value = list
}, { deep: true })

function check(value: string, status: boolean) {
  checks.value[value] = status
}
</script>

<template>
  <div :class="useFlex ? 'flex gap-2' : ''">
    <label v-for="item, idx in items" :key="item.value" class="flex pe-4">
      <Checkbox @update:checked="(status) => check(item.value, status)" :checked="checks[item.value]" />
      <div class="pt-0.5 ps-2">
        {{ item.label }}
      </div>
    </label>
  </div>
</template>
