<template>
  <div>
    <!-- 标签 -->
    <div v-if="label" class="text-sm text-gray-600 mb-2 flex items-center">
      <span v-if="required" class="text-red-500 mr-1">*</span>
      <span>{{ label }}</span>
    </div>

    <!-- Radio Group -->
    <nut-radio-group v-model="selectedValue" direction="horizontal" class="mb-4">
      <nut-radio
        v-for="option in options"
        :key="option"
        :label="option"
        class="mr-8"
        @change="() => emit('change', option)"
      >
        {{ option }}
      </nut-radio>
    </nut-radio-group>
  </div>
</template>

<script setup>
/**
 * 单选组组件
 *
 * @description 使用 NutUI RadioGroup 实现单选功能
 *              - 支持 v-model 双向绑定
 *              - 横向排列
 * @author Claude Code
 * @example
 * <RadioGroup
 *   v-model="gender"
 *   label="性别"
 *   :options="['男', '女']"
 * />
 */
import { computed } from 'vue'

/**
 * 组件属性
 */
const props = defineProps({
  /**
   * 标签文本
   * @type {string}
   */
  label: {
    type: String,
    default: ''
  },

  /**
   * 选项数组
   * @type {Array<string>}
   * @example ['男', '女']
   * @example ['是', '否']
   */
  options: {
    type: Array,
    required: true
  },

  /**
   * 是否必填
   * @type {boolean}
   */
  required: {
    type: Boolean,
    default: false
  },

  /**
   * 绑定的值
   * @type {string}
   */
  modelValue: {
    type: String,
    default: ''
  }
})

/**
 * 组件事件
 */
const emit = defineEmits([
  /**
   * 更新值事件
   * @event update:modelValue
   * @param {string} value - 选中的选项
   */
  'update:modelValue',
  /**
   * 选项变化事件
   * @event change
   * @param {string} value - 选中的选项
   */
  'change'
])

/**
 * 当前选中的值（用于 v-model）
 * @type {ComputedRef<string>}
 */
const selectedValue = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})
</script>

<style lang="less">
/* 组件样式 */
</style>