<template>
  <div class="checkbox" :class="{ checked: modelValue }" @click="toggle">
    <span v-if="modelValue" class="checkmark">✔</span>
  </div>
</template>

<script setup>
  const props = defineProps({
    modelValue: { type: Boolean, default: false },
  });

  const emits = defineEmits(["update:modelValue"]);

  const toggle = () => {
    emits("update:modelValue", !props.modelValue);
  };
</script>

<style scoped>
  .checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #df384c; /* 红色背景 */
    cursor: pointer;
    transition: 0.2s;
    user-select: none;
  }

  .checkbox.checked {
    background: #df384c; /* 选中仍为红色背景 */
  }

  .checkmark {
    font-size: 12px;
    color: white;
    line-height: 1;
  }
</style>
