<script setup>
import { computed } from 'vue'

const props = defineProps({
  size: {
    type: String,
    default: 'md',
    validator: v => ['sm', 'md', 'lg'].includes(v),
  },
  color: {
    type: String,
    default: 'success',
    validator: v => ['primary','secondary','info','success','warning','error','danger','light','dark','white'].includes(v),
  },
  variant: {
    type: String,
    default: 'fill',
    validator: v => ['fill', 'gradient'].includes(v),
  },
  rounded: { type: Boolean, default: false },
})

const fill = {
  primary:   'bg-primary text-white',
  secondary: 'bg-secondary text-white',
  info:      'bg-info text-white',
  success:   'bg-success text-white',
  warning:   'bg-warning text-white',
  danger:    'bg-danger text-white',
  error:     'bg-danger text-white',
  light:     'bg-light text-dark',
  dark:      'bg-dark text-white',
  white:     'bg-white text-dark shadow-soft-xs',
}

const grad = {
  primary:   'bg-gradient-primary shadow-primary text-white',
  secondary: 'bg-gradient-secondary shadow-secondary text-white',
  info:      'bg-gradient-info shadow-info text-white',
  success:   'bg-gradient-success shadow-success text-white',
  warning:   'bg-gradient-warning shadow-warning text-white',
  danger:    'bg-gradient-danger shadow-danger text-white',
  error:     'bg-gradient-danger shadow-danger text-white',
  light:     'bg-gradient-light shadow-soft-xs text-dark',
  dark:      'bg-gradient-dark shadow-dark text-white',
  white:     'bg-white shadow-soft-xs text-dark',
}

const sizes = {
  sm: 'px-2 py-0.5 text-xs',
  md: 'px-2.5 py-1 text-xs',
  lg: 'px-3 py-1.5 text-sm',
}

const classes = computed(() => [
  'inline-flex items-center font-medium',
  props.rounded ? 'rounded-full' : 'rounded-md',
  sizes[props.size],
  (props.variant === 'gradient' ? grad : fill)[props.color] ?? fill.success,
])
</script>

<template>
  <span :class="classes">
    <slot />
  </span>
</template>
