import type { ReactNode } from "react";
import { Stack, Typography } from "@mui/material";

import { cn } from "@/lib/utils";

type PageHeaderProps = {
  eyebrow?: string;
  title: string;
  subtitle?: string;
  actions?: ReactNode;
  className?: string;
  /** White surface bar (list page headers). */
  surface?: boolean;
};

export function PageHeader({
  eyebrow,
  title,
  subtitle,
  actions,
  className,
  surface = false,
}: PageHeaderProps) {
  return (
    <Stack
      direction="row"
      className={cn(
        surface &&
          "-mx-2.5 -mt-2.5 shrink-0 border-b border-(--color-border) bg-(--color-bg-surface) px-5 py-4",
        className,
      )}
      sx={{
        alignItems: "center",
        justifyContent: "space-between",
      }}
    >
      <Stack spacing={0}>
        {eyebrow && (
          <p className="m-0 font-sans text-(length:--text-xs) font-bold leading-none tracking-widest text-primary uppercase">
            {eyebrow}
          </p>
        )}
        <h1
          className={cn(
            "m-0 font-display mt-1! text-[30px]! font-extrabold leading-[1.1] tracking-[-0.02em] text-foreground",
            eyebrow && "mt-1",
          )}
        >
          {title}
        </h1>
        {subtitle && (
          <Typography variant="body2" color="text.secondary">
            {subtitle}
          </Typography>
        )}
      </Stack>
      {actions && (
        <Stack direction="row" spacing={1} sx={{ alignItems: "center", flexWrap: "nowrap" }}>
          {actions}
        </Stack>
      )}
    </Stack>
  );
}