<script setup lang="ts">
import { computed, type Slot } from 'vue'
import type { FdsStickerProps } from './types'

const props = withDefaults(defineProps<FdsStickerProps>(), {
  variant: 'blue',
  bullet: false,
  dataTestid: undefined,
})

const stickerClasses = computed(() => [
  'inline-block font-bold text-sm leading-[18px] tracking-normal py-0.5 px-3 rounded-xl border border-transparent whitespace-nowrap max-w-full',
  props.bullet
    ? 'text-base! bg-transparent flex-wrap justify-start items-baseline text-base font-normal text-gray-700 border-transparent p-0! mr-3'
    : '',
  // Variant colors
  props.variant === 'blue' && !props.bullet && 'bg-blue-600 text-white',
  props.variant === 'green' && !props.bullet && 'bg-green-700 text-white',
  props.variant === 'red' && !props.bullet && 'bg-red-600 text-white',
  props.variant === 'yellow' && !props.bullet && 'bg-yellow-200 text-gray-700 border-yellow-300',
  props.variant === 'gray' && !props.bullet && 'bg-gray-200 text-gray-700 border-gray-300!',
  props.variant === 't_blue' && !props.bullet && 'bg-blue_t-100 text-gray-700 border-blue_t-200!',
])

const bulletDotClasses = computed(() => [
  'inline-block w-3 h-3 rounded-full mr-1.5',
  // Bullet dot colors
  props.variant === 'blue' && 'bg-blue-600',
  props.variant === 'green' && 'bg-green-700',
  props.variant === 'red' && 'bg-red-600',
  props.variant === 'yellow' && 'bg-yellow-200 border border-yellow-300',
  props.variant === 'gray' && 'bg-gray-400',
  props.variant === 't_blue' && 'bg-blue-200 border border-blue-300',
])

const rootAttrs = computed(() => {
  const attrs: Record<string, string> = {}
  if (props.dataTestid) {
    attrs['data-testid'] = props.dataTestid
  }
  return attrs
})

defineSlots<{
  default?: Slot
}>()
</script>

<template>
  <span :class="stickerClasses" v-bind="rootAttrs">
    <span v-if="bullet" :class="bulletDotClasses"></span>
    <slot />
  </span>
</template>
