<script setup lang="ts">
defineProps<{
  modelValue: string | number
  name: string
  options: Array<{ label: string; value: string | number }>
  readonly?: boolean
}>()

const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <div style="display: inline-flex; gap: 12px; align-items: center;">
    <label v-for="opt in options" :key="opt.value" style="display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: bold; cursor: pointer; color: #2C3E50;">
      <input
        type="radio"
        :name="name"
        :value="opt.value"
        :checked="modelValue === opt.value"
        :disabled="readonly"
        style="cursor: pointer; accent-color: #2980B9;"
        @change="emit('update:modelValue', opt.value)"
      />
      {{ opt.label }}
    </label>
  </div>
</template>
