<script setup>
import {ref} from 'vue'
import AisInputGroup from '@/components/input-group/AisInputGroup.vue'
import AisInput from '@/components/input/AisInput.vue'
import AisSelect from '@/components/select/AisSelect.vue'
import AisButton from '@/components/button/AisButton.vue'
import AisDropdown from '@/components/dropdown/AisDropdown.vue'
import AisField from '@c/field/AisField.vue'

let selectedSize = ref('md')

const items = [
  { key: 'item1', label: 'Menu Item 1', href: '/menu/item/1' },
  { key: 'item2', label: 'Menu Item 2', to: '/menu/item/1' },
  { key: 'item3', label: 'Menu Item 3' },
]

</script>

<template>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <AisField label="Size" description="Select group size">
      <AisSelect
          v-model="selectedSize"
          :options="['sm', 'md', 'lg']"
          :size="selectedSize"
      />
    </AisField>
    <AisField label="AisInput + AisButton" class="md:col-span-2">
      <AisInputGroup :size="selectedSize">
        <AisInput icon="edit" placeholder="Example..." class="grow"/>
        <AisButton variant="secondary" arrow font="caps" hover press>Get Info</AisButton>
      </AisInputGroup>
    </AisField>
  </div>
</template>
