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

interface StatusIndicatorProps {
  icon: LucideIcon;
  label: string;
  subLabel?: string;
  variant: 'success' | 'warning' | 'danger' | 'info';
}

export function StatusIndicator({ icon, label, subLabel, variant }: StatusIndicatorProps) {
  const colors = {
    success: {
      text: 'text-performance-green',
      bg: 'bg-green-500/10',
      border: 'border-green-500/30',
      icon: 'rgb(16, 185, 129)'
    },
    warning: {
      text: 'text-warning-amber',
      bg: 'bg-yellow-500/10',
      border: 'border-yellow-500/30',
      icon: 'rgb(245, 158, 11)'
    },
    danger: {
      text: 'text-red-400',
      bg: 'bg-red-500/10',
      border: 'border-red-500/30',
      icon: 'rgb(239, 68, 68)'
    },
    info: {
      text: 'text-primary-blue',
      bg: 'bg-blue-500/10',
      border: 'border-blue-500/30',
      icon: 'rgb(59, 130, 246)'
    }
  };

  const config = colors[variant];

  return (
    <Box 
      display="flex" 
      alignItems="center" 
      justifyContent="between" 
      p={2} 
      rounded="lg" 
      bg={config.bg} 
      border 
      borderColor={config.border}
    >
      <Box display="flex" alignItems="center" gap={2}>
        <Icon icon={icon} size={4} color={config.icon} />
        <Text size="sm" weight="semibold" color="text-white">{label}</Text>
      </Box>
      {subLabel && (
        <Text size="xs" color="text-gray-400">
          {subLabel}
        </Text>
      )}
    </Box>
  );
}

interface StatRowProps {
  label: string;
  value: string | number;
  valueColor?: string;
  valueFont?: 'sans' | 'mono';
}

export function StatRow({ label, value, valueColor = 'text-white', valueFont = 'sans' }: StatRowProps) {
  return (
    <Box display="flex" alignItems="center" justifyContent="between">
      <Text size="xs" color="text-gray-500">{label}</Text>
      <Text size="xs" weight="bold" color={valueColor} font={valueFont}>
        {value}
      </Text>
    </Box>
  );
}

interface BadgeProps {
  children: React.ReactNode;
  variant: 'success' | 'warning' | 'danger' | 'info' | 'gray';
  size?: 'xs' | 'sm';
}

export function Badge({ children, variant, size = 'xs' }: BadgeProps) {
  const variants = {
    success: 'bg-green-500/20 text-performance-green',
    warning: 'bg-yellow-500/20 text-warning-amber',
    danger: 'bg-red-500/20 text-red-400',
    info: 'bg-blue-500/20 text-primary-blue',
    gray: 'bg-gray-500/20 text-gray-400'
  };

  return (
    <Box px={1} rounded="sm" bg={variants[variant]}>
      <Text size={size} color="inherit">
        {children}
      </Text>
    </Box>
  );
}