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

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

export function StatusBadge({ 
  children, 
  variant = 'success',
  icon,
  className
}: StatusBadgeProps) {
  const variantClasses = {
    success: 'bg-[var(--ui-color-intent-success)]/20 text-[var(--ui-color-intent-success)] border-[var(--ui-color-intent-success)]/30',
    warning: 'bg-[var(--ui-color-intent-warning)]/20 text-[var(--ui-color-intent-warning)] border-[var(--ui-color-intent-warning)]/30',
    error: 'bg-[var(--ui-color-intent-critical)]/20 text-[var(--ui-color-intent-critical)] border-[var(--ui-color-intent-critical)]/30',
    info: 'bg-[var(--ui-color-intent-primary)]/20 text-[var(--ui-color-intent-primary)] border-[var(--ui-color-intent-primary)]/30',
    neutral: 'bg-[var(--ui-color-bg-surface-muted)] text-[var(--ui-color-text-med)] border-[var(--ui-color-border-default)]',
    pending: 'bg-[var(--ui-color-intent-warning)]/20 text-[var(--ui-color-intent-warning)] border-[var(--ui-color-intent-warning)]/30',
  };
  
  const classes = [
    'px-2 py-0.5 text-[10px] uppercase tracking-wider rounded-full border font-bold inline-flex items-center',
    variantClasses[variant],
    className
  ].join(' ');
  
  const content = icon ? (
    <Stack direction="row" align="center" gap={1}>
      <Icon icon={icon} size={3} />
      {children}
    </Stack>
  ) : children;

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