<script setup>
import { ref } from "vue"
import AisCombobox from "@/components/combobox/AisCombobox.vue";
import AisRadioGroup from "@/components/radio-group/AisRadioGroup.vue";

const selectedValue = ref('Michael Jordan')
const options = ref([
  'Michael Jordan',
  `Magic Johnson`,
  'Michael Jackson',
  'Dwayne Johnson',
  'John Legend',
  'Reggie Jackson',
  'John Lennon',
])
const sizes = ref([
  { value: 'sm', label: 'Small' },
  { value: 'md', label: 'Medium' },
  { value: 'lg', label: 'Large' },
])
const size = ref('md')
</script>

<template>
  <div class=" flex flex-col gap-4 w-1/2">
    <div>
      <AisRadioGroup v-model="size" :options="sizes" size="sm" buttons button-variant="secondary" class="rounded"/>
    </div>
    <div>
      <AisCombobox v-model="selectedValue"
                   :options="options"
                   :size="size"
      ></AisCombobox>
    </div>

  </div>
</template>