import styles from "./index.module.less";

const colorBar = [
  "#7F20F0",
  "#2A09FA",
  "#1C33F1",
  "#3B6CE3",
  "#2388F8",
  "#0EA5FE",
  "#23C0FB",
  "#85CAF1",
  "#B8E1F3",
  "#FEF995",
  "#FEDD30",
  "#FEB709",
  "#FF8B00",
  "#FF5D00",
  "#FF1001",
  "#E00000",
  "#D62A2A",
  "#FFB1B1",
];

function Legend({ style }) {
  return (
    <div className={styles.legend} style={{ ...style }}>
      <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.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;
