import React from "react";
import "../css/LangSelect.css";
import { useState } from "react";
import Toggle from "./subComponents/Toggle";
import { useTheme } from "../Context/ThemeContext";
import { useLang } from "../Context/LangContext";

const LangSelect = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
  const [animation, setAnimation] = useState(initialAnimation);

  const { colormode } = useTheme();
  const { language, toggleLanguage } = useLang();

  return (
    <div
      className={`langSelect container animate__animated ${animation} ${colormode}`}
      /*  onMouseEnter={() => onMouseEnter(setAnimation)} */
      onAnimationEnd={() => onAnimationEnd(setAnimation)}
    >
      <div className="eng">🇬🇧</div>
      <Toggle toggled={language === "de-DE"} onToggle={toggleLanguage} />      <div className="ger">🇩🇪</div>
    </div>
  );
};

export default LangSelect;
