import * as React from 'react'
import { cn } from '@/lib/utils' // Import cn for consistency

const Badge = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement> & { 
  variant?: 'default' | 'secondary' | 'destructive' | 'outline' 
}>((props, ref) => {
  const { variant = 'default', className, ...rest } = props
  
  const variantClasses = {
    default: 'bg-primary text-primary-foreground',
    secondary: 'bg-secondary text-secondary-foreground',
    destructive: 'bg-destructive text-destructive-foreground',
    outline: 'border text-current',
  }
  
  return (
    <span
      ref={ref}
      className={cn( // Use cn for consistency
        'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
        variantClasses[variant],
        className
      )}
      {...rest}
    />
  )
})

Badge.displayName = 'Badge'

export { Badge }