import React from 'react';

interface BadgeProps {
  children: React.ReactNode;
  variant?: 'emerald' | 'amber' | 'rose' | 'slate' | 'cyan' | 'live' | 'mega';
  className?: string;
}

export const Badge: React.FC<BadgeProps> = ({ children, variant = 'slate', className = '' }) => {
  const variantStyles = {
    emerald: 'bg-green-50 text-d11-green border-green-200',
    amber: 'bg-amber-50 text-amber-700 border-amber-200',
    rose: 'bg-d11-soft text-d11-red border-red-200',
    live: 'bg-d11-red text-white border-d11-red shadow-sm shadow-d11-red/30',
    mega: 'bg-amber-50 text-amber-800 border-amber-200',
    slate: 'bg-gray-100 text-gray-600 border-gray-200',
    cyan: 'bg-cyan-50 text-cyan-700 border-cyan-200',
  }[variant];

  return (
    <span
      className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${variantStyles} ${className}`}
    >
      {children}
    </span>
  );
};