import { Suspense } from "react";
import { Center, Loader } from "@mantine/core";
import PageBody from "@/app/services/components/shared/PageBody/PageBody";
import { ServicesContextProvider } from "@/app/services/contexts/ServicesContext";
import { ServicesDndContextProvider } from "@/app/services/contexts/ServicesDndContext";
import PageContainer from "@/components/layout/PageContainer/PageContainer";

export default async function ServicesPage() {
    return (
        <Suspense
            fallback={
                <Center h="50vh">
                    <Loader size="lg" />
                </Center>
            }>
            <ServicesContextProvider>
                <ServicesDndContextProvider>
                    <PageContainer>
                        <PageBody />
                    </PageContainer>
                </ServicesDndContextProvider>
            </ServicesContextProvider>
        </Suspense>
    );
}
