<script setup>
  import {ref} from 'vue'
  import AisCheckboxGroup from '@/components/checkbox-group/AisCheckboxGroup.vue'

  const options = ref([
      'Apple', 'Banana', 'Grape', 'Strawberry',
      'Kiwi', 'Pomegranate', 'Orange', 'Pear',
      'Peach', 'Raspberry', 'Blueberry', 'Blackberry'
  ])
  const selections = ref([])
</script>


<template>
  <div class="grid gap-8">
    <AisCheckboxGroup
        display="grid"
        :gap="['gap-x-6', 'gap-y-4']"
        class="grid-cols-4 p-4 "
        v-model="selections"
        :options="options"
    />

    <div class="p-4 bg-ui-gray-50 border rounded">
      Selection: {{ selections }}
    </div>
  </div>
</template>
