import React from 'react'

export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'
  size?: 'sm' | 'md' | 'lg'
  children: React.ReactNode
}

export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
  ({ variant = 'primary', size = 'md', className = '', children, ...props }, ref) => {
    const baseStyles = 'inline-flex items-center font-semibold rounded-md'
    
    const variantStyles = {
      primary: 'bg-indigo-600/10 text-indigo-600 dark:bg-indigo-600/20',
      secondary: 'bg-gray-600/10 text-gray-600 dark:bg-gray-600/20',
      success: 'bg-green-600/10 text-green-600 dark:bg-green-600/20',
      danger: 'bg-red-600/10 text-red-600 dark:bg-red-600/20',
      warning: 'bg-orange-600/10 text-orange-600 dark:bg-orange-600/20',
      info: 'bg-blue-600/10 text-blue-600 dark:bg-blue-600/20',
    }
    
    const sizeStyles = {
      sm: 'px-2 py-0.5 text-xs',
      md: 'px-2.5 py-0.5 text-sm',
      lg: 'px-3 py-1 text-base',
    }
    
    return (
      <span
        ref={ref}
        className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
        {...props}
      >
        {children}
      </span>
    )
  }
)

Badge.displayName = 'Badge'
