import { Box } from '@/ui/primitives/Box';

interface RaceStatusBadgeProps {
  status: 'scheduled' | 'running' | 'completed' | 'cancelled' | string;
}

export function RaceStatusBadge({ status }: RaceStatusBadgeProps) {
  const config = {
    scheduled: {
      variant: 'info' as const,
      label: 'SCHEDULED',
      color: 'text-primary-blue',
      bg: 'bg-primary-blue/10',
      border: 'border-primary-blue/30'
    },
    running: {
      variant: 'success' as const,
      label: 'LIVE',
      color: 'text-performance-green',
      bg: 'bg-performance-green/10',
      border: 'border-performance-green/30'
    },
    completed: {
      variant: 'neutral' as const,
      label: 'COMPLETED',
      color: 'text-gray-400',
      bg: 'bg-gray-400/10',
      border: 'border-gray-400/30'
    },
    cancelled: {
      variant: 'warning' as const,
      label: 'CANCELLED',
      color: 'text-warning-amber',
      bg: 'bg-warning-amber/10',
      border: 'border-warning-amber/30'
    },
  };

  const badgeConfig = config[status as keyof typeof config] || {
    variant: 'neutral' as const,
    label: status.toUpperCase(),
    color: 'text-gray-400',
    bg: 'bg-gray-400/10',
    border: 'border-gray-400/30'
  };

  return (
    <Box 
      px={2.5} 
      py={0.5} 
      rounded="none" 
      border 
      className={`${badgeConfig.bg} ${badgeConfig.color} ${badgeConfig.border}`}
      style={{ fontSize: '10px', fontWeight: '800', letterSpacing: '0.05em' }}
    >
      {badgeConfig.label}
    </Box>
  );
}