<script setup>
import { ref } from 'vue'
import AisRadio from '@/components/radio/AisRadio.vue'
import AisSelect from '@/components/select/AisSelect.vue'

import { faGlobe } from '@fortawesome/free-solid-svg-icons'
import { library } from '@fortawesome/fontawesome-svg-core'

let selection = ref('group')
const selectedSize = ref('md')

library.add(faGlobe)
</script>

<template>
  <div class="grid gap-8">
    <AisSelect v-model="selectedSize"
               :options="['sm', 'md', 'lg']"
               size="sm"
    />
    <div class="mx-4 flex gap-8">
      <AisRadio :size="selectedSize" icon="user" v-model="selection" value="user">User</AisRadio>
      <AisRadio :size="selectedSize" icon="users" v-model="selection" value="group">Group</AisRadio>
      <AisRadio :size="selectedSize" :icon="faGlobe" v-model="selection" value="world">World</AisRadio>
    </div>
  </div>
</template>
