<template>
  <div class="grid gap-4">
    <AisSelect
      :options="variants"
      v-model="selectedVariant"
    />
    <div class="flex justify-end">
      <AisBadge :variant="selectedVariant">{{selectedVariant}} Variant</AisBadge>
    </div>
    <AisDatepicker
      v-model="selectedDate"
      :variant="selectedVariant"
    />
  </div>
</template>

<script setup>
  import {ref} from 'vue';
  import {addDate} from "@/components/datepicker/examples/datepicker-example-util.js";
  import AisDatepicker from "@/components/datepicker/AisDatepicker.vue";
  import AisSelect from "@/components/select/AisSelect.vue";
  import AisBadge from "@/components/badge/AisBadge.vue";

  const variants = [
    'primary', 'secondary', 'default',
    'info', 'success', 'warning', 'danger'
  ]

  const selectedVariant = ref('primary')
  const selectedDate = ref(addDate(2));
</script>
