import cyclone from "@/assets/cyclone.png";
import anticyclone from "@/assets/anticyclone.png";
import antiHadleyCell from "@/assets/anti-Hadleycell.png";
import low from "@/assets/Low.png";
import high from "@/assets/High.png";

function EntityLegend() {
  return (
    <div className="entity-legend">
      <div className="entity-legend-item">
        <div>
          <img src={low} width={32} />
        </div>
        <div className="entity-legend-item-name">Low</div>
      </div>
      <div className="entity-legend-item">
        <div>
          <img src={anticyclone} width={32} />
        </div>
        <div className="entity-legend-item-name">Moisture transport</div>
      </div>
      <div className="entity-legend-item">
        <div>
          <img src={antiHadleyCell} width={32} />
        </div>
        <div className="entity-legend-item-name">anti-Hadley cell</div>
      </div>
      <div className="entity-legend-item">
        <div>
          <img src={high} width={32} />
        </div>
        <div className="entity-legend-item-name">High</div>
      </div>
      <div className="entity-legend-item">
        <div>
          <img src={cyclone} width={32} />
        </div>
        <div className="entity-legend-item-name">Rainfall</div>
      </div>
      <div className="entity-legend-item">
        <div
          style={{
            width: 48,
            height: 32,
            borderRadius: "999px",
            backgroundColor: "#8d5555",
          }}
        ></div>
        <div className="entity-legend-item-name">Surface wd anomaly</div>
      </div>
      {/* <div className="entity-legend-item">
        <div>
          <img src={waterwapor} width={32} />
        </div>
        <div className="entity-legend-item-name">water wapor path</div>
      </div> */}
    </div>
  );
}

export default EntityLegend;
