import { ReactNode } from 'react';

interface BadgeProps {
  children: ReactNode;
  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'outline';
  size?: 'sm' | 'md';
  icon?: ReactNode;
  className?: string;
}

export function Badge({
  children,
  variant = 'default',
  size = 'sm',
  icon,
  className = '',
}: BadgeProps) {
  const variants = {
    default: `
      bg-[var(--color-surface-elevated)]
      text-[var(--color-text-secondary)]
      border border-[var(--glass-border)]
    `,
    primary: `
      bg-[var(--color-desire)]/15
      text-[var(--color-desire-glow)]
      border border-[var(--color-desire)]/20
    `,
    success: `
      bg-[var(--color-liked)]/15
      text-[var(--color-liked)]
      border border-[var(--color-liked)]/20
    `,
    warning: `
      bg-amber-500/15
      text-amber-400
      border border-amber-500/20
    `,
    danger: `
      bg-[var(--color-passed)]/15
      text-[var(--color-passed)]
      border border-[var(--color-passed)]/20
    `,
    outline: `
      bg-transparent
      text-[var(--color-text-secondary)]
      border border-[var(--color-text-muted)]/30
    `,
  };

  const sizes = {
    sm: 'px-2.5 py-1 text-xs',
    md: 'px-3 py-1.5 text-sm',
  };

  return (
    <span
      className={`
        inline-flex items-center gap-1.5
        rounded-full font-medium
        whitespace-nowrap
        ${variants[variant]}
        ${sizes[size]}
        ${className}
      `}
    >
      {icon && <span className="flex-shrink-0">{icon}</span>}
      {children}
    </span>
  );
}
