"use client";

import { Stack } from "@mantine/core";
import ProductsDesktopHeader from "@/app/products/components/desktop/ProductsDesktopHeader/ProductsDesktopHeader";
import ProductsMobileHeader from "@/app/products/components/mobile/ProductsMobileHeader/ProductsMobileHeader";
import PageBlock from "@/components/layout/PageBlock/PageBlock";
import useIsMobile from "@/hooks/utils/useIsMobile";
import ProductsTable from "@/app/products/components/shared/ProductsTable/ProductsTable";

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

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

export default PageBody;
