import "./main.css";
import { motion, AnimatePresence } from "framer-motion";
import { PopupConnect } from "../popupConnect/popupConnect";
import { PopupConnectEx } from "../popupConnectEx/popupConnectEx";
import { useState } from "react";
import { popupAnimation } from "../../utils/animationProps";
import { TMain } from "../../utils/types";

export const Main: React.FC<any> = ({
  data,
  text,
  onCreateSession,
  onConnectSession,
  visible,
  setVisible,
}) => {
  console.log(data);
  const { popup1, popup2 } = visible;


  return (
    <AnimatePresence mode="wait">
      {popup1 && (
        <motion.div
          key={1}
          variants={popupAnimation}
          initial={"hidden"}
          animate={"show"}
          exit={"hidden"}
        >
          <PopupConnect
            logo={data.img}
            onConnect={() => onCreateSession(data.title)}
            text={text.popupConnect}
            visible={visible}
            setVisible={setVisible}
          ></PopupConnect>
        </motion.div>
      )}
      {popup2 && (
        <motion.div
          key={2}
          variants={popupAnimation}
          initial={"hidden"}
          animate={"show"}
          exit={"hidden"}
        >
          <PopupConnectEx
            logo={data.img}
            onConnect={onConnectSession}
            visible={visible}
            setVisible={setVisible}
            text={text.popupConnectEx}
          ></PopupConnectEx>
        </motion.div>
      )}
    </AnimatePresence>
  );
};
