import { AppContext } from "@/src/pages/_app";
import Row from "@/twui/components/layout/Row";
import Span from "@/twui/components/layout/Span";
import Stack from "@/twui/components/layout/Stack";
import { useContext } from "react";

export default function AdminSummary() {
    const { pageProps } = useContext(AppContext);
    const { user, deployment, deployment_id } = pageProps;

    if (!deployment) return null;

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

    return (
        <Stack className="w-full gap-0">
            <Stack className="grid-cell-content">
                <Span>{total_services.length} Services</Span>
                <Row>
                    {total_services.map((service, index) => {
                        return (
                            <a
                                key={index}
                                href={`/admin/services/${service.service_name}`}
                            >
                                <code>{service.service_name}</code>
                            </a>
                        );
                    })}
                </Row>
            </Stack>
        </Stack>
    );
}
