<template>
  <div>
    <fieldset>
      <div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
        <div v-for="item in radioItems" :key="item.id" class="flex items-center">
          <input
            v-model="groupValue"
            type="radio"
            name="radio"
            :checked="itemSelected.id === item.id ? true : false"
            @change="onChange(item)"
            class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500"
          />
          <label
            :for="`${item.id}`"
            class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500"
            >{{ item.title }}</label
          >
        </div>
      </div>
    </fieldset>
  </div>
</template>

<script setup lang="ts">
import { ref, type PropType, onMounted } from 'vue'

interface Item {
  id: number
  title: string
  checked?: boolean
}

const onChange = (e: Item) => {
  itemSelected.value = e
  console.log(e)
  emit('update:groupValue', e)
}

const props = defineProps({
  radioItems: {
    type: Array as PropType<Item[]>,
    required: true
  }
})

const itemSelected = ref(props.radioItems[0])
const emit = defineEmits(['update:groupValue'])
const groupValue = ref(1)

onMounted(() => {
  itemSelected.value = props.radioItems[0]
})
</script>
