
type BadgeVariant = 'default' | 'red' | 'amber' | 'green' | 'outline';

interface BadgeProps {
  children: React.ReactNode;
  variant?: BadgeVariant;
  className?: string;
}

const variantStyles: Record<BadgeVariant, React.CSSProperties> = {
  default: {
    backgroundColor: 'var(--ink)',
    color: 'var(--paper)',
    border: '1px solid var(--ink)',
  },
  red: {
    backgroundColor: 'var(--red)',
    color: 'var(--paper)',
    border: '1px solid var(--red)',
  },
  amber: {
    backgroundColor: 'var(--amber)',
    color: 'var(--ink)',
    border: '1px solid var(--amber)',
  },
  green: {
    backgroundColor: 'var(--green-ink)',
    color: 'var(--paper)',
    border: '1px solid var(--green-ink)',
  },
  outline: {
    backgroundColor: 'transparent',
    color: 'var(--ink)',
    border: '1px solid var(--ink)',
  },
};

export function Badge({ children, variant = 'default', className = '' }: BadgeProps) {
  return (
    <span
      className={`inline-block ${className}`}
      style={{
        ...variantStyles[variant],
        padding: '2px 6px',
        fontSize: '9px',
        fontWeight: 700,
        textTransform: 'uppercase',
        letterSpacing: '1.5px',
        lineHeight: 1.6,
        borderRadius: 0,
      }}
    >
      {children}
    </span>
  );
}
