<template>
  <div class="bg-background-3 rounded-2xl px-8 py-10 max-lg:hidden">
    <div class="text-primary mb-3 font-bold uppercase">{{ title }}</div>
    <div
      class="mb-3 flex items-center"
      v-if="options.length > 0"
      v-for="option in options"
      :key="option.value"
    >
      <input
        type="radio"
        :id="`${name}-${option.value}`"
        :name="name"
        :value="option.value"
        :checked="modelValue === option.value"
        :disabled="disabled"
        @change="$emit('update:modelValue', $event.target.value)"
        class="bg-primary-light mr-4 h-4 w-4"
      />
      <div class="flex flex-col">
        <label
          :for="`${name}-${option.value}`"
          class="text-primary text-neutral-lighter text-[0.813rem] font-semibold uppercase"
          >{{ option.label }}</label
        >
        <span v-if="option.hint" class="text-[0.7rem]">{{ option.hint }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";

const props = defineProps({
  modelValue: String,
  disabled: Boolean,

  title: {
    type: String,
    required: true,
    default: "Trier par",
  },
  options: {
    type: Array,
    required: true,
    default: () => [
      { value: "A", label: "A" },
      { value: "B", label: "B" },
      { value: "C", label: "C" },
    ],
  },
  name: {
    type: String,
    required: true,
    default: "radio",
  },
});
</script>
<style scoped></style>
