<script setup lang="ts">
import { computed, inject, type Ref } from 'vue'
// Components
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'

const props = defineProps<{
  rec: { id: string; name: string; menu: string }
  selected?: string
}>()

const emit = defineEmits<{
  // No emits needed - using provide/inject
}>()

const record = props.rec || {}
const recId = inject('rec_select_id') as Ref<number>
const recMenu = inject('rec_select_menu') as Ref<string>
const selected = computed(() => recId.value === Number(record.id) ? record.id : '')

function handleSelection(value: string) {
  if (value === record.id) {
    recId.value = Number(record.id) || 0
    recMenu.value = record.menu || ''
  }
}
</script>

<template>
  <RadioGroup
    :model-value="selected"
    @update:model-value="handleSelection"
  >
    <RadioGroupItem
      :id="record.id"
      :value="record.id"
    />
  </RadioGroup>
</template>
