const colorBar = [
  "#FB2421",
  "#FF0000",
  "#FF3602",
  "#FF8103",
  "#FFC207",
  "#F8F805",
  "#CEFE4C",
  "#95FF8C",
  "#94FF8D",
  "#15FEC8",
  "#0AFEFB",
  "#00C3FF",
  "#3D74FD",
  "#4C08FF",
  "#4600FF",
];

function Legend() {
  return (
    <div
      className="legend"
      style={{
        background: `linear-gradient(to right,#FB2421,#FF0000,#FF3602,#FF8103,#FFC207,#F8F805,#CEFE4C,#95FF8C,#94FF8D,#15FEC8,#0AFEFB,#00C3FF,#3D74FD,#4C08FF,#4600FF)`,
      }}
    >
      <div className="legend-title">1</div>
      <div className="legend-text">
        {[-0.8, -0.4, 0, 0.4, 0.8].map((item, index) => {
          return (
            <div
              key={`legend-text-item-${index}`}
              className="legend-text-item"
              style={{
                textAlign:
                  index === 2 ? "center" : index < 2 ? "left" : "right",
              }}
            >
              {item}
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default Legend;
