import { Badge } from './Badge';
import { Box } from './Box';
import { StatusDot } from './StatusDot';
import { Text } from './Text';

export { Badge };

export interface StatusIndicatorProps {
  status?: 'live' | 'upcoming' | 'completed' | 'cancelled' | 'pending';
  variant?: string; // Alias for status
  label?: string;
  subLabel?: string;
  size?: 'sm' | 'md' | 'lg';
  icon?: any; // Alias for status dot
}

export const StatusIndicator = ({ 
  status, 
  variant,
  label,
  subLabel,
  size = 'md',
  icon
}: StatusIndicatorProps) => {
  const activeStatus = (status || variant || 'pending') as any;
  
  const configMap: any = {
    live: {
      intent: 'success' as const,
      pulse: true,
      text: 'Live',
    },
    upcoming: {
      intent: 'primary' as const,
      pulse: false,
      text: 'Upcoming',
    },
    completed: {
      intent: 'telemetry' as const,
      pulse: false,
      text: 'Completed',
    },
    cancelled: {
      intent: 'critical' as const,
      pulse: false,
      text: 'Cancelled',
    },
    pending: {
      intent: 'warning' as const,
      pulse: false,
      text: 'Pending',
    },
    success: {
      intent: 'success' as const,
      pulse: false,
      text: 'Success',
    },
    danger: {
      intent: 'critical' as const,
      pulse: false,
      text: 'Danger',
    },
    warning: {
      intent: 'warning' as const,
      pulse: false,
      text: 'Warning',
    },
  };

  const config = configMap[activeStatus] || configMap.pending;

  return (
    <Box display="flex" alignItems="center" gap={2}>
      <StatusDot intent={config.intent} pulse={config.pulse} size={size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md'} />
      <Box>
        <Text size={size === 'lg' ? 'md' : 'sm'} weight="bold" variant="high" uppercase>
          {label || config.text}
        </Text>
        {subLabel && <Text size="xs" variant="low">{subLabel}</Text>}
      </Box>
    </Box>
  );
};

export const StatRow = ({ label, value, subLabel, variant, valueColor, valueFont }: { label: string, value: string, subLabel?: string, variant?: string, valueColor?: string, valueFont?: string }) => (
  <Box display="flex" alignItems="center" justifyContent="between" paddingY={2} borderBottom>
    <Box>
      <Text size="sm" variant="high">{label}</Text>
      {subLabel && <Text size="xs" variant="low">{subLabel}</Text>}
    </Box>
    <Text size="sm" weight="bold" variant={variant as any || 'high'} color={valueColor} font={valueFont as any}>{value}</Text>
  </Box>
);