import * as React from 'react'

const Badge = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & {
    variant?: 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'error'
  }
>(({ className = '', variant = 'default', ...props }, ref) => {
  const baseStyles = 'inline-flex items-center rounded-full 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'
  
  const variants = {
    default: 'border-transparent bg-primary-navy text-white hover:bg-primary-navy-dark',
    secondary: 'border-transparent bg-section-alt text-text hover:bg-opacity-80',
    outline: 'text-foreground',
    success: 'border-transparent bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
    warning: 'border-transparent bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300',
    error: 'border-transparent bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
  }

  return (
    <div
      ref={ref}
      className={`${baseStyles} ${variants[variant]} ${className}`}
      {...props}
    />
  )
})
Badge.displayName = 'Badge'

export { Badge }