'use client';
import { FC, useState, useEffect } from "react";
import { AllProps } from "@/validations/mutual/dashboard/props";
import LanguageSelectionComponent from "@/components/mutual/languageSelection/component";
import { langGetKey } from "@/lib/langGet";
import { checkContextPageOnline } from "@/components/mutual/context/online/context";

const translations = {
    en: {
        selectedPage: "selectedPage",
        page: "page"
    },
    tr: {
        selectedPage: "seçiliSayfa",
        page: "sayfa"
    }
}

const HeaderComponent: FC<AllProps> = ({ lang, activePageUrl, prefix, mode }) => {
    const [online, setOnline] = useState(false);
    useEffect(() => {
        checkContextPageOnline().then((online) => {
            setOnline(online);
        });
    }, []);
    return (
        <div className="flex justify-between h-24 items-center p-4 border-emerald-150 border-b-2 shadow-sm backdrop-blur-sm sticky top-0 z-50 bg-emerald-50">
            <div className="flex flex-row justify-center items-center">
                <p className="text-2xl font-bold mx-3">{langGetKey(translations[lang], 'selectedPage')} :</p>
                <p className="text-lg font-bold mx-3"> {langGetKey(translations[lang], 'page')}</p>
            </div>
            <div>{JSON.stringify(online)}</div>
            <LanguageSelectionComponent lang={lang} activePage={activePageUrl} prefix={prefix} />
        </div>
    );
};

export default HeaderComponent;