import gateIcon from "~/assets/images/map_bi/content/img7.png";
import barrierIcon from "~/assets/images/map_bi/content/img8.png";
import Panel from "~/pages/Container/Map/components/Content/port/Panel";
import "./index.less";

const statistics = [
  { image: gateIcon, gateCount: 0, vehicleGateCount: 0, peopleGateCount: 0 },
  { image: barrierIcon, gateCount: 0, vehicleGateCount: 0, peopleGateCount: 0 },
];

/** 展示口门、车辆闸机和人员闸机的基础统计。 */
function GateStatsPanel() {
  return (
    <Panel title="口门统计" className="port-gate__statistics">
      <div className="port-gate-stats__options">
        {statistics.map((item, index) => (
          <div key={index} className="port-gate-stats__option">
            <img src={item.image} className="port-gate-stats__image" alt="" />
            <div className="port-gate-stats__info">
              <div>
                口门数：
                {item.gateCount}
              </div>
              <div>
                车闸机数：
                {item.vehicleGateCount}
              </div>
              <div>
                人闸机数：
                {item.peopleGateCount}
              </div>
            </div>
          </div>
        ))}
      </div>
    </Panel>
  );
}

export default GateStatsPanel;
