<script setup>
  import AisAlert from '../AisAlert.vue';
  import AisField from '@c/field/AisField.vue'
  import AisSelect from '@c/select/AisSelect.vue'
  import {ref} from 'vue'
  import {variants} from "@/util/variants-util";

  const selectedVariant = ref('default')
  const capFirst = function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }
</script>

<template>
  <div class="grid gap-y-4">
      <AisAlert :variant="selectedVariant" :title="capFirst(selectedVariant)">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Optio nam enim, saepe exercitationem repellat totam?
      </AisAlert>
    <AisField label="Variant">
      <AisSelect v-model="selectedVariant" :options="variants" />
    </AisField>
  </div>
</template>
