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

type Props = {
    title: string | ReactNode;
    description?: string | ReactNode;
    ctas?: ReactNode;
};

export default function AdminHero({ title, ctas, description }: Props) {
    const { pageProps } = useContext(AppContext);

    console.log("pageProps.pageUrl", pageProps.pageUrl);

    return (
        <Row className="w-full grid-cell-content justify-between">
            <Stack className="gap-2">
                <H1 className="admin-h1">{title}</H1>
                {description ? (
                    <Span variant="faded">{description}</Span>
                ) : null}
                <Breadcrumbs
                    pageUrl={pageProps.pageUrl || undefined}
                    skipHome
                    backButton
                />
            </Stack>
            <Row>{ctas}</Row>
        </Row>
    );
}