import React, { useEffect, useRef } from 'react';

interface SignalSVGProps {
  signal: number; // Принимаем signal как пропс
  color: string;
  size: string;
}

const SignalSVG: React.FC<SignalSVGProps> = ({ signal, color, size }) => {
  const svgRef = useRef<SVGSVGElement | null>(null);

  useEffect(() => {
    // Устанавливаем цвета в зависимости от signal
    const colors = {
        '--st1-color': signal >= 1 ? color : 'black',
        '--st2-color': signal >= 2 ? color : 'black',
        '--st3-color': signal >= 3 ? color : 'black',
        '--st4-color': signal >= 4 ? color : 'black',
        '--st5-color': signal === 5 ? color : 'black',
      };

    // Применяем стили к SVG
    if (svgRef.current) {
      Object.entries(colors).forEach(([key, value]) => {
        svgRef.current?.style.setProperty(key, value);
      });
    }
  }, [signal]);

  return (
    <svg
      ref={svgRef}
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      x="0px"
      y="0px"
      viewBox="0 0 296 235"
      xmlSpace="preserve"
      width={size} // Фиксированная ширина
        height={size}
    >
      <style type="text/css">
        {`
          .st1 { fill-rule: evenodd; clip-rule: evenodd; fill: var(--st1-color, white); }
          .st2 { fill-rule: evenodd; clip-rule: evenodd; fill: var(--st2-color, white); }
          .st3 { fill-rule: evenodd; clip-rule: evenodd; fill: var(--st3-color, white); }
          .st4 { fill-rule: evenodd; clip-rule: evenodd; fill: var(--st4-color, white); }
          .st5 { fill-rule: evenodd; clip-rule: evenodd; fill: var(--st5-color, white); }
        `}
      </style>
      <g>
        <polygon className="st1" points="47,138 47,188 0,188 0,164" />
        <polygon className="st2" points="109,104 109,188 62,188 62,130" />
        <polygon className="st3" points="171,69 171,188 124,188 124,95" />
        <polygon className="st4" points="234,35 234,188 187,188 187,61" />
        <polygon className="st5" points="296,0 296,188 249,188 249,26" />
      </g>
    </svg>
  );
};

export default SignalSVG;