import cyclone from "@/assets/cyclone.png";
import anticyclone from "@/assets/anticyclone.png";
import updraft from "@/assets/updraft.png";
import waterwapor from "@/assets/waterwapor.png";

function EntityLegend() {
  return (
    <div className="entity-legend" style={{ bottom: 116 }}>
      <div className="entity-legend-item">
        <div style={{ fontWeight: 800, color: "#04fafc" }}>- - - -</div>
        <div className="entity-legend-item-name">Rossby wave path</div>
      </div>
      <div className="entity-legend-item">
        <div>
          <img src={anticyclone} width={32} />
        </div>
        <div className="entity-legend-item-name">anticyclone</div>
      </div>
      <div className="entity-legend-item">
        <div>
          <img src={updraft} width={32} height={32} />
        </div>
        <div className="entity-legend-item-name">updraft</div>
      </div>
      <div className="entity-legend-item">
        <div
          style={{ width: 32, height: 32, backgroundColor: "#6080b0" }}
        ></div>
        <div className="entity-legend-item-name">barotroptic structure</div>
      </div>
      <div className="entity-legend-item">
        <div>
          <img src={cyclone} width={32} />
        </div>
        <div className="entity-legend-item-name">cyclone</div>
      </div>
      <div className="entity-legend-item">
        <div
          style={{
            width: 48,
            height: 32,
            borderRadius: "999px",
            backgroundColor: "#8d5555",
            marginLeft: -16,
          }}
        ></div>
        <div className="entity-legend-item-name">warming</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;