<script setup>
import {ref} from 'vue'
import AisRadioGroup
  from '@/components/radio-group/AisRadioGroup.vue'
import AisRadio
  from '@/components/radio/AisRadio.vue'


const options = ref([
  { label: 'John', role: 'Singer, Guitar', icon: 'person' },
  { label: 'Paul', role: 'Singer, Bass', icon: 'person' },
  { label: 'George', role: 'Guitar', icon: 'person' },
  { label: 'Ringo', role: 'Drums', icon: 'person' },
])
const selection = ref('Ringo')
</script>

<template>
  <div class="grid gap-4">
    <AisRadioGroup
        class="px-4"
        valueKey="label"
    >
      <AisRadio
          v-for="option in options"
          :id="`ch-${option.label}`"
          v-model="selection"
          :value="option.label"
          :icon="option.icon"
      >
        <span class="flex flex-col gap-0 leading-tight pl-2">
          <span>{{ option.label }}</span>
          <span class="text-sm text-muted italic">
            {{ option.role }}
          </span>
        </span>
      </AisRadio>
    </AisRadioGroup>
    <div class="p-4 bg-ui-gray-50 border rounded">
      Selection: {{ selection }}
    </div>
  </div>
</template>
