<script setup>
import { computed } from "vue";
const props = defineProps({
  modelValue: {
    type: [Number, String, Boolean, Array],
    required: true,
  },
  error: {
    type: String,
    default: "",
  },
  help: {
    type: String,
    default: "",
  },
  required: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: () => Math.random().toString(20).substr(2, 10),
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  autocomplete: {
    type: String,
    default: "",
  },
  value: {
    type: [Number, String, Boolean, Array],
    default: "",
  },
  label: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["update:modelValue", "keyup"]);
const componentValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
</script>
<template>
  <div class="flex flex-col gap-1 justify-center">
    <label
      :for="id"
      :class="`${
        disabled ? 'text-gray-200' : 'text-gray-900'
      } !text-sm font-medium dark:text-white !cursor-pointer !flex !items-center gap-1`"
    >
      <input
        :id="id"
        v-model="componentValue"
        :disabled="disabled"
        :required="required"
        type="radio"
        class="text-primary-800 text-3xl !m-0"
        :name="name ? name : id"
        :value="value"
      />
      <slot v-if="!label" name="label" />
      <template v-else>{{ label }}</template>
    </label>
    <div v-if="help" class="text-xs text-gray-500 dark:text-gray-400">
      {{ help }}
    </div>
  </div>
</template>
