/**
 * BoostMedia AI Content Generator Admin - Badge Component
 *
 * @package BoostMedia_AI
 * @license GPL-2.0-or-later
 */

import type { ReactNode, HTMLAttributes } from 'react'

type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'primary' | 'accent'

interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: BadgeVariant
  children: ReactNode
  dot?: boolean
}

const variantClasses: Record<BadgeVariant, string> = {
  default: 'bg-bc-gray-100 text-bc-gray-700',
  success: 'bg-green-100 text-green-800',
  warning: 'bg-yellow-100 text-yellow-800',
  error: 'bg-red-100 text-red-800',
  info: 'bg-blue-100 text-blue-800',
  primary: 'bg-bc-primary-light text-bc-primary-dark',
  accent: 'bg-bc-accent-light text-bc-accent-dark',
}

const dotColors: Record<BadgeVariant, string> = {
  default: 'bg-bc-gray-500',
  success: 'bg-green-500',
  warning: 'bg-yellow-500',
  error: 'bg-red-500',
  info: 'bg-blue-500',
  primary: 'bg-bc-primary',
  accent: 'bg-bc-accent',
}

export function Badge({ variant = 'default', children, dot = false, className = '', ...props }: BadgeProps) {
  return (
    <span
      className={`
        inline-flex items-center gap-1.5
        px-2.5 py-0.5
        text-xs font-medium
        rounded-full
        ${variantClasses[variant]}
        ${className}
      `}
      {...props}
    >
      {dot && (
        <span className={`w-1.5 h-1.5 rounded-full ${dotColors[variant]}`} />
      )}
      {children}
    </span>
  )
}