import { useCallback, useEffect, useState } from "react";
import cls from "./index.module.scss";

export default function CenterMenu({ active, onChangeActive }) {
  const menuList = [
    ["窑炉总览", "/kilnSummary"],
    ["窑炉内部", "/kilnInner"],
    ["窑炉优化", "/kilnOptimize"],
    ["退火监测", "/stopFire"],
    ["质检统计", "/quailtyCheck"],    
    ["能耗分析", "/energyCost"],
  ];
  return (
    <div className={`${cls.centerMenu} flex`}>
      {menuList.map((menu) => (
        <div
          key={menu[0]}
          className={`${cls.menuItem} ${active == menu[0] ? cls.active : ""}`}
          onClick={() => onChangeActive(menu[0])}
        >
          {menu[0]}
        </div>
      ))}
    </div>
  );
}