<template>
  <div>
    <div class="space-y-3">
      <div>
        <AisRadioGroup
            v-model="selectedOption"
            :options="options"
            name="radios"
            buttons
            buttons-rounded
        />
      </div>
      <div>
        <AisRadioGroup
            v-model="selectedOption"
            :options="options"
            name="radios"
            buttons
            buttons-rounded="md"
        />
      </div>
      <div>
        <AisRadioGroup
            v-model="selectedOption"
            :options="options"
            name="radios"
            buttons
            buttons-rounded="lg"
        />
      </div>
      <div>
        <AisRadioGroup
            v-model="selectedOption"
            :options="options"
            name="radios"
            buttons
            buttons-rounded="full"
        />
      </div>
    </div>

    <div><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>
