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

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;
};

export function PageHeader({ eyebrow, title, subtitle, actions, className }: PageHeaderProps) {
  return (
    <Stack
      direction={{ xs: "column", md: "row" }}
      spacing={2}
      className={cn("mb-4", className)}
      sx={{
        alignItems: { xs: "stretch", md: "center" },
        justifyContent: "space-between",
      }}
    >
      <Stack spacing={0.5}>
        {eyebrow && (
          <Typography variant="overline" className="text-muted-foreground">
            {eyebrow}
          </Typography>
        )}
        <Typography variant="h5" component="h1" className="text-foreground">
          {title}
        </Typography>
        {subtitle && (
          <Typography
            variant="body2"
            sx={{
              color: "text.secondary",
            }}
          >
            {subtitle}
          </Typography>
        )}
      </Stack>
      {actions && (
        <Stack
          direction="row"
          spacing={1}
          sx={{
            alignItems: "center",
          }}
        >
          {actions}
        </Stack>
      )}
    </Stack>
  );
}