import type { ReactNode } from 'react'

export type BadgeVariant = 'info' | 'success' | 'warning' | 'error'

interface BadgeProps {
  children: ReactNode
  variant?: BadgeVariant
  className?: string
}

function getVariantClasses(variant: BadgeVariant): string {
  switch (variant) {
    case 'info':
      return 'bg-neon-cyan/20 text-neon-cyan border-neon-cyan/50'
    case 'success':
      return 'bg-neon-green/20 text-neon-green border-neon-green/50'
    case 'warning':
      return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/50'
    case 'error':
      return 'bg-red-500/20 text-red-400 border-red-500/50'
    default:
      return 'bg-neon-cyan/20 text-neon-cyan border-neon-cyan/50'
  }
}

export function Badge({ children, variant = 'info', className = '' }: BadgeProps): React.ReactElement {
  const variantClasses = getVariantClasses(variant)
  const baseClasses = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border'
  const combinedClasses = `${baseClasses} ${variantClasses} ${className}`.trim()

  return (
    <span className={combinedClasses}>
      {children}
    </span>
  )
}