import { forwardRef, type HTMLAttributes } from 'react';
import { cn } from '../lib/cn';

type BadgeVariant = 'success' | 'warning' | 'danger' | 'info' | 'neutral';

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: BadgeVariant;
}

const variantStyles: Record<BadgeVariant, string> = {
  success: 'bg-success-100 text-success-800 border-success-300',
  warning: 'bg-warning-100 text-warning-800 border-warning-300',
  danger: 'bg-danger-100 text-danger-800 border-danger-300',
  info: 'bg-info-100 text-info-800 border-info-300',
  neutral: 'bg-warm-100 text-warm-700 border-warm-300',
};

export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
  ({ className, variant = 'neutral', ...props }, ref) => {
    return (
      <span
        ref={ref}
        className={cn(
          'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium',
          variantStyles[variant],
          className
        )}
        {...props}
      />
    );
  }
);

Badge.displayName = 'Badge';
