<template>
  <div
    class="justify-center items-center"
    aria-labelledby="spinner-label"
    role="alert"
    aria-live="assertive"
    :class="[color, opacity, size, classes]"
  >
    <AisIcon icon="busy" />
    <span class="sr-only" id="spinner-label">{{ description }}</span>
    <slot />
  </div>
</template>

<script setup>
import { computed } from "vue";
import AisIcon from '@/components/icon/AisIcon.vue';
import { expectedValues, prefixValidator } from "@/util/prop-validators";
import { ensureArray } from "@/util/util";

const props = defineProps({
  description: { type: String, required: false, default: 'Loading data' },
  size: { type: String, required: false, default: 'text-7xl' },
  color: { type: String, required: false, default: 'text-ui-gray-900' },
  opacity: { type: String, required: false, default: 'text-opacity-60' },
  display: {
    type: String, required: false, default: 'flex',
    validator: expectedValues('flex', 'grid', 'inline-flex', 'inline-grid')
  },
  gap: {
    type: [String, Array], required: false, default: () => ['gap-2'],
    validator: prefixValidator('gap-')
  },
})

const classes = computed(() => {
  const displayClasses = [props.display]
  if(props.display === 'flex')
    displayClasses.push('flex-wrap')

  const gapClasses = ensureArray(props.gap)

  return [...displayClasses, ...gapClasses]
})
</script>
