import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

interface TelemetryItem {
  label: string;
  value: string | number;
  trend?: 'up' | 'down' | 'neutral';
  color?: string;
}

interface TelemetryStripProps {
  items: TelemetryItem[];
  className?: string;
}

/**
 * TelemetryStrip
 * 
 * A thin, dense strip showing key telemetry or performance metrics.
 * Follows the "Precision Racing Minimal" theme.
 */
export function TelemetryStrip({ items, className = '' }: TelemetryStripProps) {
  return (
    <Box 
      className={`bg-graphite-black/80 border-y border-border-gray/30 py-2 px-4 flex items-center gap-8 overflow-x-auto no-scrollbar ${className}`}
    >
      {items.map((item, index) => (
        <Stack key={index} direction="row" align="center" gap={2} className="whitespace-nowrap">
          <Text size="xs" color="text-gray-500" uppercase weight="bold" letterSpacing="widest">
            {item.label}
          </Text>
          <Text 
            size="sm" 
            weight="bold" 
            style={{ color: item.color || '#4ED4E0' }}
            className="font-mono"
          >
            {item.value}
          </Text>
          {item.trend && (
            <Text size="xs" style={{ color: item.trend === 'up' ? '#10b981' : item.trend === 'down' ? '#ef4444' : '#94a3b8' }}>
              {item.trend === 'up' ? '↑' : item.trend === 'down' ? '↓' : '•'}
            </Text>
          )}
        </Stack>
      ))}
    </Box>
  );
}