import rain from "@/assets/Rain.png";
import heatflux from "@/assets/Heatflux.png";
import styles from "./index.module.less";

function SiteLegend() {
  return (
    <div className={styles.siteLegend}>
      <div className="site-legend-item">
        <div>
          <img
            src={rain}
            alt="rain-increase"
            width={32}
            style={{ transform: "rotate(180deg)" }}
          />
        </div>
        <div className="site-legend-item-name">降水异常增加</div>
      </div>
      <div className="site-legend-item">
        <div>
          <img src={rain} alt="rain-decrease" width={32} />
        </div>
        <div className="site-legend-item-name">降水异常降低</div>
      </div>
      <div className="site-legend-item">
        <div>
          <img
            src={heatflux}
            alt="heatflux-increase"
            width={32}
            style={{ transform: "rotate(180deg)" }}
          />
        </div>
        <div className="site-legend-item-name">感热通量异常增加</div>
      </div>
      <div className="site-legend-item">
        <div>
          <img src={heatflux} alt="heatflux-decrease" width={32} />
        </div>
        <div className="site-legend-item-name">感热通量异常降低</div>
      </div>
    </div>
  );
}

export default SiteLegend;
