<script setup>
import {ref} from 'vue'
import AisCheckboxGroup
  from '@/components/checkbox-group/AisCheckboxGroup.vue'
import AisCheckbox
  from '@/components/checkbox/AisCheckbox.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 selections = ref([])
</script>

<template>
  <div class="grid gap-4">
    <AisCheckboxGroup
        class="px-4"
        valueKey="label"
    >
      <AisCheckbox
          v-for="option in options"
          :id="`ch-${option.label}`"
          v-model="selections"
          :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>
      </AisCheckbox>
    </AisCheckboxGroup>
    <div class="p-4 bg-ui-gray-50 border rounded">
      Selection: {{ selections }}
    </div>
  </div>
</template>
