"use client";

import { FC } from "react";
import { Stack } from "@mantine/core";
import ClientDesktopHeader from "@/app/clients/components/desktop/ClientDesktopHeader/ClientDesktopHeader";
import ClientsTable from "@/app/clients/components/shared/ClientsTable/ClientsTable";
import PageBlock from "@/components/layout/PageBlock/PageBlock";
import useIsMobile from "@/hooks/utils/useIsMobile";
import ClientMobileHeader from "@/app/clients/components/mobile/ClientMobileHeader/ClientMobileHeader";

const PageBody: FC = () => {
    const isMobile = useIsMobile();

    return (
        <Stack h={"100%"}>
            {!isMobile && (
                <PageBlock>
                    <ClientDesktopHeader />
                </PageBlock>
            )}
            <PageBlock
                style={{ flex: 1, minHeight: 0 }}
                fullScreenMobile>
                <Stack
                    gap={"xs"}
                    h={"100%"}>
                    {isMobile && <ClientMobileHeader />}
                    <div style={{ flex: 1, overflow: "auto" }}>
                        <ClientsTable />
                    </div>
                </Stack>
            </PageBlock>
        </Stack>
    );
};

export default PageBody;
