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

function EntityLegend() {
  return (
    <div className="entity-legend" style={{ bottom: 116 }}>
      <div className="entity-legend-item">
        <div>
          <img src={low} alt="low" width={32} />
        </div>
        <div className="entity-legend-item-name">Low</div>
      </div>
      <div className="entity-legend-item">
        <div>
          <img src={moisture} alt="moisture" width={32} />
        </div>
        <div className="entity-legend-item-name">Moisture transport</div>
      </div>
      <div className="entity-legend-item">
        <div>
          <img src={antiHadleyCell} alt="antiHadleyCell" width={32} />
        </div>
        <div className="entity-legend-item-name">anti-Hadley cell</div>
      </div>
      <div className="entity-legend-item">
        <div>
          <img src={high} alt="high" width={32} />
        </div>
        <div className="entity-legend-item-name">High</div>
      </div>
      <div className="entity-legend-item">
        <div>
          <img src={cloud} alt="cloud" width={32} />
        </div>
        <div className="entity-legend-item-name">Rainfall</div>
      </div>
      <div className="entity-legend-item">
        {/* <div>
          <img src="" />
        </div>
        <div className="entity-legend-item-name">Surface wind anomaly</div> */}
      </div>
    </div>
  );
}

export default EntityLegend;
