import cls from "./kiln.module.scss";
import Container from "../../Container";
import { useSelector } from "react-redux";
import { stateNameMap } from "../../../store/features/kilnSlice";

export default function Kiln() {
  const kilnInfo = useSelector((state) => state.kiln);

  const infos = Object.keys(kilnInfo).map((key) => ({
    label: stateNameMap[key],
    value: kilnInfo[key],
  }));

  return (
    <Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
      <div className={cls.leftBar__top__content}>
        {infos.map((item) => (
          <div key={item.label} className={cls.info__item}>
            <span className={cls.label}>{item.label}</span>
            <span className={cls.value}>{item.value}</span>
            {/* {item.label}: {item.value} */}
          </div>
        ))}
      </div>
    </Container>
  );
}