import { useEffect } from "react";

declare global {
    interface Window {
        google: any;
        googleTranslateElementInit: () => void;
    }
}

export default function GoogleTranslate() {
    useEffect(() => {
        // Prevent multiple script loads
        if (document.getElementById("google-translate-script")) return;

        const script = document.createElement("script");
        script.id = "google-translate-script";
        script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
        script.async = true;

        document.body.appendChild(script);

        window.googleTranslateElementInit = () => {
            if (!window.google) return;

            new window.google.translate.TranslateElement(
                {
                    pageLanguage: "en",
                    includedLanguages: "en,si,ta", // English, Sinhala, Tamil
                },
                "google_translate_element"
            );
        };
    }, []);

    return <div id="google_translate_element"></div>;
}