const colorBar = [
  "#7272FF",
  "#8585FF",
  "#fff",
  "#FFAFAF",
  "#FF9C9C",
  "#FF8787",
  "#FF7474",
  "#FF6060",
  "#FF4B4B",
  "#FE3838",
  "#FF2323",
];

function Legend() {
  return (
    <div className="legend">
      <div className="legend-title"></div>
      <div className="colorbar">
        {colorBar.map((color, index) => {
          return (
            <div
              key={`colorbar-item-${index}`}
              className="colorbar-item"
              style={{ backgroundColor: color }}
            />
          );
        })}
      </div>
      <div className="legend-text">
        {[-0.02, -0.01, 0.01, 0.02, 0.03, 0.05, 0.1, 0.15, 0.2, 0.25, ""].map(
          (item, index) => {
            return (
              <div
                key={`legend-text-item-${index}`}
                className="legend-text-item"
              >
                {item}
              </div>
            );
          }
        )}
      </div>
    </div>
  );
}

export default Legend;