import BlueRect from "../BlueRect";
import { useSelector } from "react-redux";
import { motion, AnimatePresence } from "framer-motion";

const blueTe = [
  "TE271",
  "TE272",
  "TE273",
  "TE274",
  "TE275",
  "TE276",
  "TE277",
  "TE278",
  "TE279",
  "TE280",
];

function TemperatureTop(props) {
  const tempTop = useSelector((state) => state.temperature.top);

  return (
    <motion.div
      className="temperature-top"
      style={{
        position: "absolute",
        top: "0",
        left: "0",
        width: "100%",
        height: "80vh",
        zIndex: "-1",
        ...props.style
      }}
      animate={{
        opacity: [0, 0, 0, 0.6, 1],
        transition: { duration: 0.3, delay: 2 },
      }}
    >
      {Object.keys(tempTop).map((d) => (
        <BlueRect title={d} key={d + Math.random()} value={tempTop[d]} blue={blueTe.includes(d)} />
      ))}
    </motion.div>
  );
}

export default TemperatureTop;