<script setup lang="ts">
import { cva } from 'class-variance-authority'
import { cn } from '~/lib/utils'

interface BadgeProps {
  status: 'success' | 'info' | 'warning' | 'error'
  text: string
}

const props = defineProps<BadgeProps>()

const badgeVariants = cva(
  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
  {
    variants: {
      variant: {
        success: 'rounded-full border-transparent bg-green-500 text-white hover:bg-green-600',
        info: 'rounded-full border-transparent bg-blue-500 text-white hover:bg-blue-600',
        warning: 'rounded-full border-transparent bg-yellow-500 text-white hover:bg-yellow-600',
        error: 'rounded-full border-transparent bg-red-500 text-white hover:bg-red-600',
      },
    },
    defaultVariants: {
      variant: 'info',
    },
  },
)
</script>

<template>
  <div class="flex">
    <div :class="cn(badgeVariants({ variant: props.status }))">
      {{ props.text }}
    </div>
  </div>
</template>
