shoc-frontend-new/src/components/ui/page-header.tsx

import type { ReactElement } from "react";
import { Stack } from "@mui/material";

import { Text } from "@/components/ui/text";
import { cn } from "@/lib/utils";

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

export function PageHeader({
  eyebrow,
  title,
  subtitle,
  actions,
  className,
  surface = false,
}: PageHeaderProps) {
  return (
    <Stack
      direction={{ xs: "column", md: "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: { xs: "stretch", md: "center" },
        justifyContent: "space-between",
        gap: { xs: 2, md: 0 },
      }}
    >
      <Stack spacing={0}>
        <Text
          variant="label"
          when={Boolean(eyebrow)}
          className="m-0 text-(length:--text-xs) font-bold leading-none tracking-widest text-primary uppercase"
        >
          {eyebrow}
        </Text>
        <Text
          variant="display"
          className={cn(
            "m-0 font-display mt-1! text-[30px]! font-extrabold leading-[1.1] tracking-[-0.02em] text-foreground",
            eyebrow && "mt-1",
          )}
          sx={{ fontSize: 30, fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em" }}
        >
          {title}
        </Text>
        <Text
          variant="description"
          as="span"
          tone="muted"
          when={Boolean(subtitle)}
          sx={{ mt: 0.75, fontWeight: 500 }}
        >
          {subtitle}
        </Text>
      </Stack>
      {Boolean(actions) && (
        <Stack
          direction="row"
          spacing={1}
          useFlexGap
          sx={{
            alignItems: "center",
            flexWrap: { xs: "wrap", md: "nowrap" },
            width: { xs: "100%", md: "auto" },
          }}
        >
          {actions}
        </Stack>
      )}
    </Stack>
  );
}