import { HTMLAttributes, forwardRef } from 'react';
import { cn } from '@/lib/utils';

interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'outline';
  size?: 'sm' | 'md';
}

const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
  ({ className, variant = 'default', size = 'md', ...props }, ref) => {
    const baseStyles = 'inline-flex items-center font-mono font-medium transition-all duration-200';
    
    const variants = {
      default: 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)]',
      primary: 'bg-[var(--primary)]/20 text-[var(--primary)] border border-[var(--primary)]/30',
      success: 'bg-[var(--success)]/20 text-[var(--success)] border border-[var(--success)]/30',
      warning: 'bg-[var(--accent)]/20 text-[var(--accent)] border border-[var(--accent)]/30',
      danger: 'bg-[var(--destructive)]/20 text-[var(--destructive)] border border-[var(--destructive)]/30',
      outline: 'bg-transparent text-[var(--muted-foreground)] border border-[var(--border)] hover:bg-[var(--card-hover)] hover:text-[var(--foreground)]'
    };
    
    const sizes = {
      sm: 'px-1.5 py-0.5 text-xs rounded',
      md: 'px-2 py-1 text-xs rounded-md'
    };
    
    return (
      <span
        className={cn(
          baseStyles,
          variants[variant],
          sizes[size],
          className
        )}
        ref={ref}
        {...props}
      />
    );
  }
);

Badge.displayName = 'Badge';

export { Badge };