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

interface TelemetryLineProps {
  color?: 'primary' | 'aqua' | 'amber' | 'green' | 'red';
  height?: number | string;
  animate?: boolean;
  opacity?: number;
  className?: string;
}

export function TelemetryLine({ 
  color = 'primary', 
  height = '2px', 
  animate = false,
  opacity = 1,
  className = '' 
}: TelemetryLineProps) {
  const colorMap = {
    primary: 'bg-primary-accent',
    aqua: 'bg-telemetry-aqua',
    amber: 'bg-warning-amber',
    green: 'bg-success-green',
    red: 'bg-critical-red',
  };

  return (
    <Box 
      height={height} 
      fullWidth 
      className={`${colorMap[color]} ${animate ? 'animate-pulse' : ''} ${className}`}
      style={{
        opacity,
        boxShadow: `0 0 8px ${
          color === 'primary' ? '#198CFF' : 
          color === 'aqua' ? '#4ED4E0' : 
          color === 'amber' ? '#FFBE4D' : 
          color === 'green' ? '#6FE37A' : '#E35C5C'
        }4D`
      }}
    />
  );
}