import React, { memo, useMemo } from "react";

import { Stack, StackProps } from "@mui/material";

export interface PageHeaderProps extends StackProps {
  variant?: string;
}

const BaseHeader: React.FC<PageHeaderProps> = ({
  variant = "default",
  children,
  sx: passedSx,
  ...props
}) => {
  const variantSx = useMemo(
    () =>
      variant === "opaque"
        ? {
            backgroundColor: "background.paper",
            borderBottom: 1,
            borderColor: "divider",
            pt: 2,
          }
        : variant === "default"
          ? { background: "background.default", py: 2 }
          : {},
    [variant],
  );

  const sx = useMemo(() => ({ ...variantSx, ...passedSx }), [variantSx, passedSx]);

  return (
    <Stack direction="column" sx={sx} {...props}>
      {children}
    </Stack>
  );
};

export const Header = memo(BaseHeader);