import { useState } from "react";
import { LanguagePopup } from "../../LanguagePopup/LanguagePopup";
import { Button } from "../button/button";
import microOn from "../../../images/icons/MicroOn.svg";
import { AnimatePresence, motion } from "framer-motion";
const container = {
  hidden: {
    opacity: 0,
    transition: { duration: 0.2, ease: 'easeOut' }
  },
  show: {
    opacity: 1,
    transition: { delay: 0.15, duration: 0.2, ease: 'easeIn' },
  },
  exit: {
    opacity: 0,
    transition: { duration: 0.2, ease: 'easeOut' }
  }
}




export const LanguageButton: React.FC<any> = ({ hover, setHover }) => {
  const [active, setActive] = useState(false);
  const [open, setOpen] = useState(false)
  const button = {
    icon: microOn,
    active: "Язык",
    inactive: "Язык",
    type: "language",
  };

  function handleClick() {
    setOpen(true)
    setActive((prev) => !prev);
  }

  return (
    <div className="toolbar-button-area">
      <Button button={button} onClick={handleClick}></Button>
      <AnimatePresence>
        {open && (<motion.div
          variants={container}
          initial={'hidden'}
          animate={'show'}
          exit={'hidden'}>
          <LanguagePopup setOpen={setOpen}></LanguagePopup>
        </motion.div>)}
      </AnimatePresence>
    </div>
  );
};