<script setup>
import { twMerge } from "tailwind-merge";
import { defineProps } from "vue";

const props = defineProps({
  checked: Boolean,
  disabled: Boolean,
  title: String,
  onClick: Function,
  onChange: Function,
  name: String,
  value: String,
  className: {
    type: String,
    default: "",
  },
});
</script>

<template>
  <label
    :class="
      twMerge('cursor-pointer flex justify-center items-center my-0', className)
    "
  >
    <input
      :name="name || 'checkbox'"
      type="checkbox"
      class="checkbox checkbox-sm rounded-full checkbox-success"
      :checked="checked"
      :disabled="disabled"
      :value="value"
      @click.stop="
        (e) => {
          onClick && onClick();
        }
      "
      @change.stop.prevent="
        (e) => {
          console.log('@', e.target.value, e.target.checked);
          onChange && onChange(e.target.value, e.target.checked);
        }
      "
    />
    <!-- <input
      v-else
      type="checkbox"
      :name="name||'checkbox'"
      :disabled="disabled"
      class="checkbox checkbox-sm rounded-full checkbox-success mr-3"
      @click.stop.prevent="
        (e) => {
          onClick && onClick();
        }
      "
    /> -->
    <span v-if="title" class="ml-3"> {{ title }}</span>
  </label>
</template>

<style lang="css" scoped>
.checkbox:disabled {
  @apply bg-opacity-50;
}
</style>
