<script setup lang="ts">
import type { DsRadioOption } from "../../types";

const model = defineModel<string>({ default: "" });
withDefaults(
  defineProps<{
    legend: string;
    name: string;
    options: DsRadioOption[];
    description?: string;
    error?: string;
    disabled?: boolean;
    required?: boolean;
  }>(),
  {
    description: undefined,
    error: undefined,
    disabled: false,
    required: false,
  },
);
</script>

<template>
  <fieldset
    class="ds-radio-group"
    :disabled="disabled"
    :aria-describedby="
      error ? `${name}-error` : description ? `${name}-description` : undefined
    "
  >
    <legend class="ds-radio-group__legend">{{ legend }}</legend>
    <p
      v-if="description"
      :id="`${name}-description`"
      class="ds-field__description"
    >
      {{ description }}
    </p>
    <div class="ds-radio-group__options">
      <label v-for="option in options" :key="option.value" class="ds-choice">
        <input
          v-model="model"
          type="radio"
          :name="name"
          :value="option.value"
          :disabled="option.disabled"
          :required="required"
        />
        <span class="ds-choice__content">
          <span class="ds-choice__label">{{ option.label }}</span>
          <span v-if="option.description" class="ds-choice__description">{{
            option.description
          }}</span>
        </span>
      </label>
    </div>
    <p
      v-if="error"
      :id="`${name}-error`"
      class="ds-field__message ds-field__message--error"
    >
      {{ error }}
    </p>
  </fieldset>
</template>
