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

// const colorBar = [
//   #830000
//   #000083
// ];

function Legend({ style }) {
  return (
    <div className={styles.legend} style={{ ...style }}>
      <div className="legend-title">Temperature anomaly(℃)</div>
      <div
        className="colorbar"
        style={{ background: "linear-gradient(to right,#000083,#fff,#830000)" }}
      ></div>
      <div className="legend-text">
        {[-1, -0.5, 0, 0.5, 1].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;
