<script lang="ts" setup>
import {twMerge} from "tailwind-merge";

defineOptions({ name: 'AStatusBadge' })

interface Props {
  type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
  view?: 'default' | 'inverted' | 'transparent'
  size?:  'xs' | 'sm' | 'lg'
  customClasses?: string
}

const props = withDefaults(defineProps<Props>(), {
  type: 'primary',
  view: 'default',
  size: 'lg',
  customClasses: ''
})

const classes = computed(() =>
  [
    'text-sm rounded-md select-none inline-flex gap-[5.5px] justify-center items-center',
    typeSwitchValues[props.view][props.type],
    props.size === 'xs'? 'px-4 py-[2px] text-xs font-bold' : '',
    props.size === 'sm'? 'text-xs font-semibold px-4 py-[2px] h-6' : '',
    props.size === 'lg'? 'px-4 py-[7.5px] font-semibold' : '',
  ])


const typeSwitchValues: ViewType = {
  default: {
    primary: 'bg-blue-700 text-white dark:text-gray-900 dark:bg-blue-500',
    success: 'bg-green-500 text-white dark:text-gray-200 dark:bg-green-400',
    danger: 'bg-red-500 text-white dark:text-gray-200  ',
    warning: 'bg-yellow-400 text-white dark:text-gray-200  ',
    gray: 'bg-deepblue-900 text-white dark:text-gray-200 dark:bg-gray-200/10',
    orange: 'bg-orange-600 text-white  dark:text-gray-200'
  },
  inverted: {
    primary: 'bg-blue-700/10  text-blue-700 dark:text-blue-500 dark:bg-[#1EABFF1A]',
    success: 'bg-green-500/20  text-green-500 dark:text-green-400 dark:bg-green-400/20',
    danger: 'bg-red-500/10 text-red-500  dark:text-red-400 dark:bg-red-400/10',
    warning: 'bg-yellow-400/10 text-yellow-400',
    gray: 'bg-deepblue-900/10 text-gray-600 dark:text-gray-200 dark:bg-gray-200/10',
    orange: 'bg-orange-600/10 text-orange-600'
  },
  transparent: {
    success: 'bg-green-500/10 text-green-500 dark:bg-green-400/10 dark:text-green-400',
    danger: 'bg-red-500/10 text-red-500 dark:bg-red-400/10 dark:text-red-400'
  }
}




type StateType = {
  [key in 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning']?: string
}

type ViewType = {
  default: StateType
  inverted: StateType
  transparent: StateType
};



</script>
<template>
  <div :class="[[classes], customClasses]">
    <slot name="point"/>
    <slot />
  </div>
</template>
