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

const justifications = ref([
  'justify-start', 'justify-end', 'justify-center',
  'justify-between', 'justify-around'
])
const selectedJustification = ref('justify-start')

const options = ref([
  'Apple', 'Banana', 'Grape'
])
const selections = ref([])
</script>


<template>
  <div class="grid gap-4">
    <AisSelect
        v-model="selectedJustification"
        :options="justifications"
        size="sm"
    />

    <AisCheckboxGroup
        display="flex"
        class="p-4"
        :class="selectedJustification"
        v-model="selections"
        :options="options"
    />

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