import React, { ReactNode } from 'react';
import { Box } from './primitives/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;
  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
}

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

  const roundedClasses = {
    none: 'rounded-none',
    sm: 'rounded-sm',
    md: 'rounded-md',
    lg: 'rounded-lg',
    xl: 'rounded-xl',
    '2xl': 'rounded-2xl',
    full: 'rounded-full'
  };

  const variantClasses = {
    default: 'bg-gray-500/10 border-gray-500/30 text-gray-400',
    primary: 'bg-primary-accent/10 border-primary-accent/30 text-primary-accent',
    success: 'bg-success-green/10 border-success-green/30 text-success-green',
    warning: 'bg-warning-amber/10 border-warning-amber/30 text-warning-amber',
    danger: 'bg-critical-red/10 border-critical-red/30 text-critical-red',
    info: 'bg-telemetry-aqua/10 border-telemetry-aqua/30 text-telemetry-aqua'
  };

  const classes = [
    baseClasses, 
    sizeClasses[size],
    roundedClasses[rounded],
    !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>
  );
}