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

const defaultOption = {value: undefined, label: 'Default option...', disabled: false }

const options = [
  { value: 1, label: 'Option #1', disabled: false},
  { value: 2, label: 'Option #2', disabled: false},
  { value: 3, label: 'Option #3', disabled: false},
]

const selectedOption = ref(undefined)
</script>

<template>
  <div class="grid gap-8">
    <AisSelect
        :defaultOption="defaultOption"
        :options="options"
        v-model="selectedOption"
    >
      <template #head>
        <option value="4">Head #1</option>
        <option value="5">Head #2</option>
      </template>
    </AisSelect>

    <div class="p-4 bg-ui-gray-50 border rounded">
      v-model: {{selectedOption}}
    </div>
  </div>
</template>
