const colorBar = [
  "#f6df70",
  "#f4c53a",
  "#f5aa38",
  "#f29438",
  "#ec6b38",
  "#ea5418",
];

function Legend() {
  return (
    <div className="legend">
      <div className="legend-title">xxx</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">
        {[0.2, 0.3, 0.4, 0.5, 0.6, ""].map((item, index) => {
          return (
            <div key={`legend-text-item-${index}`} className="legend-text-item">
              {item}
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default Legend;
