import type { ReactNode } from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import type { SxProps, Theme } from "@mui/material/styles";

export interface PageHeaderProps {
  title: string;
  subtitle?: string;
  actions?: ReactNode;
}

/**
 * Shared sx for a header action-button group. On mobile each button gets its
 * own full-width row (column + stretch); from `sm` up it's the usual right-
 * aligned wrapping row. Use on the Box that wraps the header's action Buttons
 * (page headers + detail-page headers) so the mobile layout is identical
 * everywhere — no more buttons wrapping into a ragged grid on phones.
 */
export const headerActionsSx: SxProps<Theme> = {
  display: "flex",
  flexDirection: { xs: "column", sm: "row" },
  alignItems: { xs: "stretch", sm: "center" },
  justifyContent: { sm: "flex-end" },
  flexWrap: { sm: "wrap" },
  gap: 1,
  width: { xs: "100%", sm: "auto" },
  // Some detail-page headers keep a StatusChip in this same group — keep it at
  // its natural size on mobile instead of stretching it into a full-width bar.
  "& > .MuiChip-root": { alignSelf: { xs: "flex-start", sm: "auto" } },
};

/**
 * Standard page header: title (+ optional subtitle) on the left,
 * action controls on the right. No framer-motion — pages add their own entrance.
 */
export default function PageHeader({
  title,
  subtitle,
  actions,
}: PageHeaderProps) {
  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "flex-start",
        justifyContent: "space-between",
        flexWrap: "wrap",
        gap: 2,
        mb: 3,
      }}
    >
      <Box>
        <Typography variant="h4">{title}</Typography>
        {subtitle && (
          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
            {subtitle}
          </Typography>
        )}
      </Box>
      {actions && <Box sx={headerActionsSx}>{actions}</Box>}
    </Box>
  );
}