import React, { ReactNode } from 'react';
import { Box } from './Box';
import { Icon } from './Icon';
import { LucideIcon } from 'lucide-react';

interface BadgeProps {
  children: ReactNode;
  className?: string;
  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
  size?: 'xs' | 'sm' | 'md';
  icon?: LucideIcon;
  style?: React.CSSProperties;
  bg?: string;
  color?: string;
  borderColor?: string;
}

export function Badge({ children, className = '', variant = 'default', size = 'sm', icon, style, bg, color, borderColor }: BadgeProps) {
  const baseClasses = 'flex items-center gap-1.5 rounded-full border font-medium';
  
  const sizeClasses = {
    xs: 'px-1.5 py-0.5 text-[10px]',
    sm: 'px-2.5 py-1 text-xs',
    md: 'px-3 py-1.5 text-sm'
  };

  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, 
    sizeClasses[size],
    !bg && !color && !borderColor ? variantClasses[variant] : '',
    bg,
    color,
    borderColor,
    className
  ].filter(Boolean).join(' ');

  return (
    <Box className={classes} style={style}>
      {icon && <Icon icon={icon} size={3} />}
      {children}
    </Box>
  );
}