import React from 'react';

interface TerminalBadgeProps {
  children: React.ReactNode;
  variant?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
  size?: 'sm' | 'md';
  className?: string;
}

/**
 * TerminalBadge - Terminal-style pill badges with semantic colors
 *
 * Variants:
 * - info: Blue accent for informational content
 * - success: Green accent for positive states
 * - warning: Amber accent for warnings
 * - error: Red accent for errors/negative states
 * - neutral: Gray for neutral content
 *
 * Sizes:
 * - sm: Small text with compact padding
 * - md: Default size for general use
 */
export const TerminalBadge: React.FC<TerminalBadgeProps> = ({
  children,
  variant = 'neutral',
  size = 'md',
  className = '',
}) => {
  const variantClasses = {
    info: 'bg-info/10 border-info/30 text-info',
    success: 'bg-positive/10 border-positive/30 text-positive',
    warning: 'bg-warning/10 border-warning/30 text-warning',
    error: 'bg-negative/10 border-negative/30 text-negative',
    neutral: 'bg-neutral/10 border-neutral/30 text-neutral',
  };

  const sizeClasses = {
    sm: 'text-[10px] px-2 py-0.5',
    md: 'text-xs px-2.5 py-1',
  };

  const classes = [
    'inline-flex items-center rounded-md border font-mono font-medium',
    variantClasses[variant],
    sizeClasses[size],
    className,
  ]
    .filter(Boolean)
    .join(' ');

  return <span className={classes}>{children}</span>;
};
