import { cn } from '../../utils/cn';

export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';

interface BadgeProps {
  variant?: BadgeVariant;
  size?: 'sm' | 'md';
  children: React.ReactNode;
  className?: string;
}

const variantStyles = {
  default: 'bg-[var(--color-bg-base)] text-[var(--color-text-secondary)]',
  primary: 'bg-[var(--color-primary-subtle)] text-[var(--color-primary-text)]',
  secondary: 'bg-[var(--color-secondary-subtle)] text-[var(--color-secondary-text)]',
  accent: 'bg-[var(--color-accent-subtle)] text-[var(--color-accent-text)]',
  success: 'bg-green-50 text-green-700 dark:bg-green-500/15 dark:text-green-400',
  warning: 'bg-amber-50 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400',
  danger: 'bg-red-50 text-red-700 dark:bg-red-500/15 dark:text-red-400',
  info: 'bg-blue-50 text-blue-700 dark:bg-blue-500/15 dark:text-blue-400',
};

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

const Badge = ({ variant = 'default', size = 'md', className, children }: BadgeProps) => (
  <span className={cn('inline-flex items-center rounded-full font-medium', variantStyles[variant], sizeStyles[size], className)}>
    {children}
  </span>
);

export default Badge;
