import * as React from 'react'

const Badge = React.forwardRef(
  ({ 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-primary-navy 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-text',
      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 }