import Stack from "@/twui/components/layout/Stack";
import { Fragment, useContext } from "react";
import { AppContext } from "@/src/pages/_app";
import twuiSlugToNormalText from "@/twui/components/utils/slug-to-normal-text";
import Divider from "@/twui/components/layout/Divider";
import AdminHero from "@/src/components/general/admin/hero";
import ServiceClusters from "./(sections)/clusters";

export default function Main() {
    const { pageProps } = useContext(AppContext);
    const { service, deployment } = pageProps;

    const deployment_name = deployment?.deployment_name;
    const service_name = service?.service_name;

    return (
        <Fragment>
            <AdminHero
                title={`${twuiSlugToNormalText(service_name)} Service`}
                description={
                    <>
                        Deployment <code>{deployment_name}</code>
                        {` > `}
                        <code>{service_name}</code>
                    </>
                }
            />
            <Divider />
            <ServiceClusters />
        </Fragment>
    );
}