<script setup>
import { computed } from "vue";

const props = defineProps({
  modelValue: [Number, String, Boolean, Array],
  id: {
    type: String,
    default: () => Math.random().toString(20).substr(2, 10),
  },
  name: {
    type: String,
    default: "",
  },
  value: {
    type: String,
    default: "",
  },
  checked: {
    type: Boolean,
    default: false,
  },
  falseValue: {
    type: [Boolean, String, Number],
    default: false,
  },
  description: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["update:modelValue"]);
const componentValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
</script>
<template>
  <label class="inline-flex items-center cursor-pointer" :for="id">
    <input
      :id="id"
      v-model="componentValue"
      type="checkbox"
      :value="value"
      class="sr-only peer"
      :checked="checked"
    />
    <div
      class="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-800"
    ></div>
    <div class="ms-2 text-sm">
      <span class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
        ><slot
      /></span>
      <p v-if="description" class="ms-2 text-xs font-normal text-gray-500">
        {{ description }}
      </p>
      <slot v-else name="description"></slot>
    </div>
  </label>
</template>
