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

const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <label style="display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: bold; cursor: pointer; color: #2C3E50;">
    <input
      type="checkbox"
      :checked="modelValue"
      :disabled="readonly"
      style="cursor: pointer; accent-color: #2980B9;"
      @change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
    />
    <span v-if="label">{{ label }}</span>
  </label>
</template>
