<script setup>
  import AisIconButton from '@c/icon-button/AisIconButton.vue'
  import AisField from '@c/field/AisField.vue'
  import AisSelect from '@c/select/AisSelect.vue'
  import {ref} from 'vue'

  const sizes = ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl']
  const selectedSize = ref('md')
</script>

<template>
  <div class="grid gap-4 ">
    <AisField label="Size" size="sm">
      <AisSelect v-model="selectedSize" :options="sizes" />
    </AisField>

    <div class="flex gap-2 bg-ui-gray-50 p-4">
      <AisIconButton icon="edit" label="Edit example" :size="selectedSize" />
      <AisIconButton icon="close" label="Info example" :size="selectedSize" />
      <AisIconButton icon="delete" label="Delete example" :size="selectedSize" />
    </div>
  </div>
</template>
