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

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

let options = ref(['One', 'Two', 'Three', 'Four'])
let selection = ref([])

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">
      <AisCheckbox :size="selectedSize" icon="user" v-model="selection" value="user">User</AisCheckbox>
      <AisCheckbox :size="selectedSize" icon="users" v-model="selection" value="group">Group</AisCheckbox>
      <AisCheckbox :size="selectedSize" :icon="faGlobe" v-model="selection" value="world">World</AisCheckbox>
    </div>
  </div>
</template>
