const colorBar = [
  "#4160ac",
  "#4363ae",
  "#4867b1",
  "#4d6bb3",
  "#5370b6",
  "#5d79bb",
  "#6c85c1",
  "#778dc7",
  "#8297cd",
  "#8fa3d3",
  "#9baed9",
  "#a6b7de",
  "#b0c0e3",
  "#bcc9e6",
  "#c9d3eb",
  "#d4ddf1",
  "#fbd1d2",
  "#fac4c6",
  "#f9b8ba",
  "#f8abae",
  "#f79fa2",
  "#f59496",
  "#f4878a",
  "#f37a7c",
  "#f36e70",
  "#f26264",
  "#f15759",
  "#f04c4f",
  "#f14145",
  "#ef3637",
  "#ee2e30",
  "#ee2529",
];

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 }}
              title={`${(-3.2 + index * 0.2).toFixed(1)}~${(
                -3.2 +
                (index + 1) * 0.2
              ).toFixed(1)}`}
            />
          );
        })}
      </div>
      <div className="legend-text">
        {[-2.4, -1.6, -0.8, 0, 0.8, 1.6, 2.4, ""].map((item, index) => {
          return (
            <div key={`legend-text-item-${index}`} className="legend-text-item">
              {item}
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default Legend;