import { AppContext } from "@/src/pages/_app";
import Stack from "@/twui/components/layout/Stack";
import { useContext } from "react";
import DeploymentService from "../(partials)/service";

export default function DeploymentServices() {
    const { pageProps } = useContext(AppContext);
    const { deployment, children_services } = pageProps;

    const services = deployment?.services.filter(
        (srv) => !Boolean(srv.parent_service_name),
    );

    return (
        <Stack className="w-full nested-grid-frame xl:grid-cols-2">
            {services?.map((service, index) => {
                return <DeploymentService key={index} service={service} />;
            })}
        </Stack>
    );
}
