import { FC } from "react";
import { useTrad } from "@/hooks/useTrad";
import "./LangButton.scss";

export const LangButton: FC = () => {
    const { language, setLanguage } = useTrad();

    const languages: string[] = ["fr", "en"];

    return (
        <nav
            className={`lang-button__container ${
                language === "fr"
                    ? "lang-button__container--1"
                    : "lang-button__container--2"
            }`}>
            {languages.map((lang) => (
                <>
                    <button
                        key={lang}
                        className="lang-button__button"
                        onClick={() => setLanguage(lang as "fr" | "en")}>
                        {lang}
                    </button>
                </>
            ))}
            <div className="lang-button__glider"></div>
        </nav>
    );
};