'use client';
import { FC } from "react";
import { langGetKey } from "@/lib/langGet";
import { FooterProps } from "@/validations/mutual/dashboard/props";
import { LanguageTypes } from "@/validations/mutual/language/validations";

const translations = {
    en: {
        footer: "footer",
        page: "page"
    },
    tr: {
        footer: "footer",
        page: "sayfa"
    }
}

const FooterComponent: FC<FooterProps> = ({
    activePageUrl, configData, configLoading, configError,
    onlineData, onlineLoading, onlineError
}) => {
    // Use the config context hook
    const lang = onlineData?.lang as LanguageTypes || 'en';

    return (
        <div className="fixed text-center bottom-0 left-0 right-0 h-16 p-4 border-t border-emerald-150 border-t-2 shadow-sm backdrop-blur-sm bg-emerald-50">
            <div className="flex justify-between items-center">
                <div className="text-sm text-gray-500">
                    {!configLoading && configData && (
                        <span>Theme: {configData.theme || 'Default'}</span>
                    )}
                </div>
                <div>
                    <h1>{langGetKey(translations[lang], "footer")}: {langGetKey(translations[lang], "page")}</h1>
                </div>
                <div className="text-sm text-gray-500">
                    {!configLoading && configData && (
                        <span>Text Size: {configData.textFont || 'Default'}</span>
                    )}
                </div>
            </div>
        </div>
    );
};

export default FooterComponent;
