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}
      alignItems={{ xs: "stretch", md: "center" }}
      justifyContent="space-between"
      className={cn("mb-4", className)}
    >
      <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" color="text.secondary">
            {subtitle}
          </Typography>
        )}
      </Stack>
      {actions && (
        <Stack direction="row" spacing={1} alignItems="center">
          {actions}
        </Stack>
      )}
    </Stack>
  );
}