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

const props = defineProps({
  value: { type: [String, Number, Object, Array, Boolean, null], default: "" },
  name: { type: String, required: true },
  items: Array,
  isLabelExist: {
    type: Boolean,
    default: true,
  },
  required: {
    type: Boolean,
    default: false,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
});
</script>

<template>
  <div class="form-control w-80 max-w-sm">
    <div :class="twMerge(isLabelExist ? 'label' : '')">
      <span class="label-text text-lg"><slot name="topLeft"></slot></span>
      <span class="label-text-alt"> <slot name="topRight"></slot></span>
    </div>
    <div class="flex flex-wrap">
      <label
        v-for="item in items"
        :key="item.key"
        class="label cursor-pointer mr-5"
      >
        <input
          type="radio"
          :name="name || 'radio'"
          v-model="value[name]"
          class="radio radio-info border-info rounded-full mr-3"
          :value="item.value"
          :required="required"
          :readonly="readonly"
        />
        <span class="label-text text-xl">{{ item.title }}</span>
      </label>
    </div>

    <div :class="twMerge(isLabelExist ? 'label' : '')">
      <span class="label-text-alt"> <slot name="bottomLeft"></slot></span>
      <span class="label-text-alt"> <slot name="bottomRight"></slot></span>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
