import React from 'react';
import { Text } from './Text';

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

export function StatusBadge({ 
  children, 
  variant = 'success',
  className = ''
}: StatusBadgeProps) {
  const variantClasses = {
    success: 'bg-performance-green/20 text-performance-green',
    warning: 'bg-warning-amber/20 text-warning-amber',
    error: 'bg-red-600/20 text-red-400',
    info: 'bg-blue-500/20 text-blue-400'
  };
  
  const classes = [
    'px-2 py-1 text-xs rounded-full',
    variantClasses[variant],
    className
  ].filter(Boolean).join(' ');
  
  return (
    <Text size="xs" className={classes}>
      {children}
    </Text>
  );
}