import H1 from "@/src/components/twui/layout/H1";
import Link from "@/src/components/twui/layout/Link";
import P from "@/src/components/twui/layout/P";
import Row from "@/src/components/twui/layout/Row";
import Stack from "@/src/components/twui/layout/Stack";
import { ArrowLeft } from "lucide-react";
import type { ReactNode } from "react";
import type { ActionMenuItem } from "../action-menu/types";
import PageHeaderActions from "./page-header-actions";

type Props = {
    title: ReactNode;
    description?: ReactNode;
    /** Inline status line under the title (status dots, mono values) */
    meta?: ReactNode;
    primary_action?: ActionMenuItem;
    actions?: ActionMenuItem[];
    back?: { href: string; title: string };
    /** Rendered under the title row, e.g. a `SubNav` */
    nav?: ReactNode;
};

export default function PageHeader({
    title,
    description,
    meta,
    primary_action,
    actions,
    back,
    nav,
}: Props) {
    return (
        <Stack className="w-full gap-3 px-4 sm:px-6 pt-6 pb-5">
            {back ? (
                <Link
                    href={back.href}
                    className="text-[15px] text-muted! hover:text-fg! no-underline!"
                >
                    <Row className="gap-1">
                        <ArrowLeft size={14} />
                        {back.title}
                    </Row>
                </Link>
            ) : null}
            <Row className="w-full justify-between items-start gap-4 flex-nowrap">
                <Stack className="gap-1.5 min-w-0">
                    <H1 className="break-words">{title}</H1>
                    {description ? (
                        typeof description == "string" ? (
                            <P className="text-[15px] max-w-2xl">
                                {description}
                            </P>
                        ) : (
                            description
                        )
                    ) : null}
                    {meta ? <Row className="gap-x-4 gap-y-1">{meta}</Row> : null}
                </Stack>
                <PageHeaderActions
                    primary_action={primary_action}
                    actions={actions}
                />
            </Row>
            {nav ? <div className="w-full pt-2">{nav}</div> : null}
        </Stack>
    );
}