<template>
  <div>
    <div class="grid grid-cols-4 gap-3 text-center">
      <div>
        <AisRadioGroup
            v-model="selectedOption"
            :options="options"
            name="radios"
            stacked
            buttons
            buttons-rounded
        />
        <b>rounded</b>
      </div>
      <div>
        <AisRadioGroup
            v-model="selectedOption"
            :options="options"
            name="radios"
            stacked
            buttons
            buttons-rounded="md"
        />
        <b>rounded-md</b>
      </div>
      <div>
        <AisRadioGroup
            v-model="selectedOption"
            :options="options"
            name="radios"
            stacked
            buttons
            buttons-rounded="lg"
        />
        <b>rounded-lg</b>
      </div>
      <div>
        <AisRadioGroup
            v-model="selectedOption"
            :options="options"
            name="radios"
            stacked
            buttons
            buttons-rounded="full"
        />
        <b>rounded-full</b>
      </div>
    </div>


    <div class="mt-4"><b>Selected Option: </b> {{ selectedOption }}</div>
  </div>
</template>

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

  const selectedOption = ref('')

  const options = ref([
      { value: 'A', text: 'Option A' },
      { value: 'B', text: 'Option B' },
      { value: 'C', text: 'Option C' },
  ])
</script>
