'use client';
import { FC } from "react";
import { HeaderProps } from "@/validations/mutual/dashboard/props";
import { langGetKey } from "@/lib/langGet";
import LanguageSelectionComponent from "@/components/mutual/languageSelection/component";
import { LanguageTypes } from "@/validations/mutual/language/validations";

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

const HeaderComponent: FC<HeaderProps> = ({
    activePageUrl, onlineData, onlineLoading, onlineError, refreshOnline, updateOnline,
    userData, userLoading, userError, refreshUser, updateUser
}) => {
    const lang = onlineData?.lang as LanguageTypes || 'en';
    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"> {activePageUrl || langGetKey(translations[lang], 'page')}</p>
            </div>
            <div className="flex items-center">
                {!onlineLoading && onlineData && onlineData.userType && (
                    <div className="mr-4 text-sm">
                        <span className="font-semibold">{lang}</span>
                        <span className="ml-2 text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">{onlineData.userType}</span>
                    </div>
                )}<LanguageSelectionComponent
                    activePage={activePageUrl} onlineData={onlineData} onlineLoading={onlineLoading} onlineError={onlineError} refreshOnline={refreshOnline} updateOnline={updateOnline}
                />
            </div>
        </div>
    );
};

export default HeaderComponent;
