<script setup>
import {ref} from 'vue'
import AisRadioGroup
  from '@/components/radio-group/AisRadioGroup.vue'
import AisRadio
  from '@/components/radio/AisRadio.vue'
import AisToggle
  from '@/components/toggle/AisToggle.vue'

const groupDisabled = ref(true)
const options = ref(['Option 1', 'Option 2'])
const selection = ref('Option 1')
</script>

<template>
  <div class="grid gap-4">
    <div class="flex items-center gap-3">
      Disable: <AisToggle v-model="groupDisabled"/>
    </div>

    <AisRadioGroup
        class="px-4"
        :options="options"
        v-model="selection"
        :disabled="groupDisabled"
    >
      <AisRadio value="Body 1">Body 1</AisRadio>
      <AisRadio value="Body 2" disabled>Body 2</AisRadio>
    </AisRadioGroup>
    <div class="p-4 bg-ui-gray-50 border rounded">
      Selection: {{ selection }}
    </div>
  </div>
</template>
