import React from 'react';
import { Icon } from './Icon';
import { LucideIcon } from 'lucide-react';
import { Stack } from './Stack';

interface StatusBadgeProps {
  children: React.ReactNode;
  variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'pending';
  className?: string;
  icon?: LucideIcon;
}

export function StatusBadge({ 
  children, 
  variant = 'success',
  className = '',
  icon,
}: StatusBadgeProps) {
  const variantClasses = {
    success: 'bg-performance-green/20 text-performance-green border-performance-green/30',
    warning: 'bg-warning-amber/20 text-warning-amber border-warning-amber/30',
    error: 'bg-red-600/20 text-red-400 border-red-600/30',
    info: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
    neutral: 'bg-iron-gray text-gray-400 border-charcoal-outline',
    pending: 'bg-warning-amber/20 text-warning-amber border-warning-amber/30',
  };
  
  const classes = [
    'px-2 py-0.5 text-xs rounded-full border font-medium inline-flex items-center',
    variantClasses[variant],
    className
  ].filter(Boolean).join(' ');
  
  const content = icon ? (
    <Stack direction="row" align="center" gap={1.5}>
      <Icon icon={icon} size={3} />
      {children}
    </Stack>
  ) : children;

  return (
    <span className={classes}>
      {content}
    </span>
  );
}