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

interface BadgeProps extends Omit<BoxProps<'div'>, 'children'> {
  children: ReactNode;
  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
  size?: 'xs' | 'sm' | 'md';
  icon?: LucideIcon;
}

export function Badge({ children, className = '', variant = 'default', size = 'sm', icon, rounded = 'none', ...props }: 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],
    typeof rounded === 'string' && roundedClasses[rounded as keyof typeof roundedClasses] ? roundedClasses[rounded as keyof typeof roundedClasses] : '',
    !props.bg && !props.color && !props.borderColor ? variantClasses[variant] : '',
    className
  ].filter(Boolean).join(' ');

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