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

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

export default function AdminHero({ title, description, buttons }: Props) {
    return (
        <Section>
            <Stack className="w-full items-stretch">
                <Row className="w-full justify-between items-start">
                    <Stack className="gap-3">
                        <H1>{title}</H1>
                        {description ? (
                            typeof description == "string" ? (
                                <Span>{description}</Span>
                            ) : (
                                description
                            )
                        ) : null}
                    </Stack>
                    <Row>{buttons}</Row>
                </Row>
            </Stack>
        </Section>
    );
}