<template>
  <div>
    <h4>Radio Buttons:</h4>
    <AisRadioGroup
        v-model="selectedOption"
        :options="options"
        name="radios"
        @update="handleUpdate($event)"
        @change="handleChange($event)"
        @input="handleInput($event)"
    />

    <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' },
  ])

  const handleChange = (e) => {
      console.log('example.handleChange...  ' + e);
  }
  const handleInput = (e) => {
      console.log('example.handleInput...  ' + e);
  }
  const handleUpdate = (e) => {
      console.log('example.handleUpdate...  ' + e);
  }
</script>
