<script setup>
// Wraps PrimeVue Checkbox. Binary (boolean) or multi (array + value). Optional label prop; or add your own <label> when needed.
import { computed, ref } from "vue";
import Checkbox from "primevue/checkbox";

const props = defineProps({
  modelValue: { type: [Boolean, Array], default: undefined }, // v-model: boolean when binary, array when multi
  value: { type: [String, Number, Object], default: undefined }, // for multi: value of this option
  binary: { type: Boolean, default: false }, // true = boolean v-model, false = array + value
  indeterminate: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  readonly: { type: Boolean, default: false },
  required: { type: Boolean, default: false },
  label: { type: String, default: "" }, // optional; shown next to checkbox, associated via for/id
  id: { type: String, default: undefined }, // maps to inputId for label association
  class: { type: [String, Object, Array], default: "" },
});

const emit = defineEmits(["update:modelValue", "change", "focus", "blur"]);

const fallbackId = ref(
  `base-checkbox-${Math.random().toString(36).slice(2, 11)}`,
);
const inputId = computed(() => props.id || fallbackId.value);
</script>

<template>
  <div class="flex align-items-center gap-2" :class="props['class']">
    <Checkbox
      :input-id="inputId"
      :model-value="modelValue"
      :value="value"
      :binary="binary"
      :indeterminate="indeterminate"
      :disabled="disabled"
      :readonly="readonly"
      :required="required"
      v-bind="$attrs"
      @update:model-value="emit('update:modelValue', $event)"
      @change="emit('change', $event)"
      @focus="emit('focus', $event)"
      @blur="emit('blur', $event)"
    />
    <label
      v-if="label"
      :for="inputId"
      class="text-surface-950 dark:text-surface-0 text-base font-normal cursor-pointer select-none"
      >{{ label }}</label
    >
  </div>
</template>
