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

// 4.5 三极联动影响东亚夏季风
const colorBar45 = [
  "#7272ff",
  "#8585ff",
  "#fff",
  "#ffafaf",
  "#ff9c9c",
  "#ff8787",
  "#ff7474",
  "#ff6060",
  "#ff4b4b",
  "#ff3838",
  "#ff2323",
];

const legendText45 = [
  -0.02,
  -0.01,
  0.01,
  0.02,
  0.03,
  0.05,
  0.1,
  0.15,
  0.2,
  0.25,
  "",
];

function Legend45() {
  return (
    <div className={styles.legend}>
      <div className="legend-title">三极联动影响东亚夏季风</div>
      <div className="colorbar">
        {colorBar45.map((color, index) => {
          return (
            <div
              key={`colorbar-item-${index}`}
              className="colorbar-item"
              style={{ backgroundColor: color }}
              title={`${(-3.2 + index * 0.2).toFixed(1)}~${(
                -3.2 +
                (index + 1) * 0.2
              ).toFixed(1)}`}
            />
          );
        })}
      </div>
      <div className="legend-text">
        {legendText45.map((item, index) => {
          return (
            <div key={`legend-text-item-${index}`} className="legend-text-item">
              {item}
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default Legend45;