<template>
  <span
    class="badge inline-flex justify-center items-center space-x-3 leading-relaxed font-medium rounded-full border"
    :class="badgeClasses"
  >
    <slot />

    <!-- <AisIcon v-if="hasIcon" :icon="icon" class /> -->
  </span>
</template>

<script setup>
import { fontLookup } from "@/util/input-props"
import { computed } from "vue";
import { expectedValues } from "@/util/prop-validators";
import { iconProps } from "../icon/ais-icons";
import AisIcon from "@/components/icon/AisIcon.vue"

const props = defineProps({
  // ...iconProps,
  // primary, secondary, tertiary
  variant: {
    type: String, required: false, default: 'default',
    validator: expectedValues(
      'default', 'primary', 'secondary',
      'info', 'success', 'warning', 'danger', 'plain'
    )
  },

  alternate: { type: Boolean, required: false, default: false },

  font: {
    type: String, required: false, default: 'sans',
    validator: expectedValues('caps', 'sans', 'serif')
  },

  size: {
    type: String, required: false, default: 'md',
    validator: expectedValues('xs', 'sm', 'md', 'lg', 'xl')
  },
})

// const hasIcon = computed(() => !!props.icon)

const badgeClasses = computed(() => {
  let classes = [props.size, props.variant, fontLookup(props.font)]
  if (props.alternate) classes.push("alternate")
  if (props.font === "caps") classes.push('uppercase')
  return classes
})

</script>
