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

const colorBar = [
  "#801FEF",
  "#050CFB",
  "#3B6EE6",
  "#159AFF",
  "#36C1F8",
  "#AADBF2",
  "#FFF479",
  "#FFC113",
  "#FF7E00",
  "#FF7E00",
  "#CD0000",
  "#FFB1B1",
];

function Legend() {
  return (
    <div className={styles.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">
        {["", -1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8, 1.0, ""].map(
          (item, index) => {
            return (
              <div
                key={`legend-text-item-${index}`}
                className="legend-text-item"
                style={{
                  textAlign:
                    index === 6 ? "center" : index < 6 ? "left" : "right",
                }}
              >
                {item}
              </div>
            );
          }
        )}
      </div>
    </div>
  );
}

export default Legend;
