import React, { ReactNode } from 'react';
import { Box } from './Box';

interface BadgeProps {
  children: ReactNode;
  className?: string;
  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
}

export function Badge({ children, className = '', variant = 'default' }: BadgeProps) {
  const baseClasses = 'flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-medium';
  
  const variantClasses = {
    default: 'bg-gray-500/10 border-gray-500/30 text-gray-400',
    primary: 'bg-primary-blue/10 border-primary-blue/30 text-primary-blue',
    success: 'bg-performance-green/10 border-performance-green/30 text-performance-green',
    warning: 'bg-warning-amber/10 border-warning-amber/30 text-warning-amber',
    danger: 'bg-red-600/10 border-red-600/30 text-red-500',
    info: 'bg-neon-aqua/10 border-neon-aqua/30 text-neon-aqua'
  };

  const classes = [baseClasses, variantClasses[variant], className].filter(Boolean).join(' ');

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