1  // svgs
 2  import { ReactComponent as FlagSpain } from "../../assets/svg/files/españa.svg";
 3  import { ReactComponent as FlagUSA } from "../../assets/svg/files/usa.svg";
 4  import { ReactComponent as FlagItaly } from "../../assets/svg/files/italia.svg";
 5  import { ReactComponent as BrazilFlag } from "../../assets/svg/files/brazil.svg";
 6  //
 7  import { useEffect, useState } from "react";
 8  import i18n from "../../i18n";
 9  
10  export const LanguageHook = () => {
11    const [languageMenu, setLanguageMenu] = useState<any>({
12      code: localStorage.language ? localStorage.language : "en",
13    });
14  
15    const changeLocalLanguage = (e: string) => {
16      localStorage.setItem("language", e);
17    };
18  
19    const languageOptionTemplate = () => {
20      return (
21        <div className="">
22          {languageMenu.code === "es" && <FlagSpain />}
23          {languageMenu.code === "en" && <FlagUSA />}
24          {languageMenu.code === "it" && <FlagItaly />}
25          {languageMenu.code === "pt" && <BrazilFlag />}
26        </div>
27      );
28    };
29  
30    const onLanguageChange = (value: string) => {
31      setLanguageMenu({ code: value });
32      i18n.changeLanguage(value, () => {
33        changeLocalLanguage(value);
34      });
35    };
36  
37    useEffect(() => {
38      i18n.changeLanguage(languageMenu.code, () => {
39        changeLocalLanguage(languageMenu.code);
40      });
41    }, []);
42  
43    return { onLanguageChange, languageOptionTemplate, languageMenu };
44  };