'use server';
import { FC, Suspense } from "react";
import { ContentProps, ModeTypesList } from "@/validations/mutual/dashboard/props";
import LoadingContent from "@/components/mutual/loader/component";
import PageToBeChildrendSingle from "./PageToBeChildrendSingle";
import PageToBeChildrendMulti from "./PageToBeChildrendMulti";

const ContentComponent: FC<ContentProps> = async ({ lang, translations, activePageUrl, isMulti, mode }) => {
    const modeFromQuery = ModeTypesList.includes(mode || '') ? mode : 'list'
    const renderProps = { lang, translations, activePageUrl, mode: modeFromQuery }
    const PageToBeChildrend = isMulti ? PageToBeChildrendMulti : PageToBeChildrendSingle
    const loadingContent = <LoadingContent height="h-16" size="w-36 h-48" plane="h-full w-full" />
    const classNameDiv = "fixed top-24 left-80 right-0 py-10 px-15 border-emerald-150 border-l-2 overflow-y-auto h-[calc(100vh-64px)]"
    return (
        <div className={classNameDiv}><Suspense fallback={loadingContent}><PageToBeChildrend {...renderProps} /></Suspense></div>
    );
};

export default ContentComponent;