<script setup>
import {ref} from 'vue'
import AisRadioGroup from '@/components/radio-group/AisRadioGroup.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 selection = ref('Banana')
</script>


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

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

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