<template>
  <div class="vm-radio-group" role="radiogroup">
    <label
      v-for="opt in options"
      :key="String(opt.value)"
      class="vm-radio"
    >
      <input
        type="radio"
        :name="name"
        :value="String(opt.value)"
        :disabled="disabled"
        :checked="String(modelValue ?? '') === String(opt.value)"
        @change="onChange(opt.value)"
      />
      <span class="vm-radio__text">{{ opt.label }}</span>
    </label>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'vm-radio' })

withDefaults(
  defineProps<{
    modelValue?: string | number | boolean | null
    options?: Array<{ label: string; value: string | number | boolean }>
    name?: string
    disabled?: boolean
  }>(),
  {
    options: () => [],
    name: 'vm-radio',
  },
)

const emit = defineEmits<{
  'update:modelValue': [v: string | number | boolean]
  change: [v: string | number | boolean]
}>()

function onChange(value: string | number | boolean) {
  emit('update:modelValue', value)
  emit('change', value)
}
</script>

<style lang="scss">
.vm-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  min-height: var(--vm-control-height);
  align-items: center;
}

.vm-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--foreground);
  cursor: pointer;
  user-select: none;

  input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--brand);
    cursor: pointer;
  }

  &:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
  }
}

.vm-radio__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
</style>
