<template>
  <div class="grid gap-8 mt-4">
    <AisSpinner
        :size="size"
        :color="color"
        :opacity="opacity"
    />

    <div class="grid gap-2 md:grid-cols-3 p-4 border rounded bg-ui-gray-50">
      <AisField label="Size">
        <AisSelect v-model="size" :options="sizes" size="sm"  />
      </AisField>

      <AisField label="Color">
        <AisSelect v-model="color" :options="colors" size="sm" />
      </AisField>

      <AisField label="Opacity">
        <AisSelect v-model="opacity" :options="opacities" size="sm" />
      </AisField>
    </div>
  </div>
</template>

<script setup>
  import {ref} from "vue";
  import AisSpinner from '@/components/spinner/AisSpinner.vue';
  import AisField from '@/components/field/AisField.vue';
  import AisSelect from '@/components/select/AisSelect.vue';

  const sizes = ["text-7xl", "text-5xl", "text-3xl"]
  const colors = ["text-ui-gray-900", "text-ui-gold", "text-success"]
  const opacities = ["opacity-60", "opacity-30", "opacity-100"]

  const size = ref(sizes[0])
  const color = ref(colors[0])
  const opacity = ref(opacities[0])
</script>