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

const options = ref(['Option 1', 'Option 2'])
const selectedSize = ref('md')
const selections = ref([])
</script>

<template>
  <div class="grid gap-4">
    <AisSelect v-model="selectedSize"
               :options="['sm', 'md', 'lg']"
               size="sm"
    />
    <AisCheckboxGroup
        :options="options"
        v-model="selections"
        :size="selectedSize"
        class="px-4"
    >
      <AisCheckbox value="Body 1">Body 1</AisCheckbox>
      <AisCheckbox value="Body 2">Body 2</AisCheckbox>
    </AisCheckboxGroup>
    <div class="p-4 bg-ui-gray-50 border rounded">
      Selection: {{ selections }}
    </div>
  </div>
</template>
