"use client";

/* eslint-disable react/require-default-props */
import { FC, PropsWithChildren } from "react";
import { Box } from "@mui/material";
import { useLeafcutterContext } from "./LeafcutterProvider";

type PageHeaderProps = PropsWithChildren<{
  backgroundColor: string;
  sx?: any;
}>;

export const PageHeader: FC<PageHeaderProps> = ({
  backgroundColor,
  sx = {},
  children,
}: any) => {
  const {
    colors: { white },
  } = useLeafcutterContext();

  return (
    <Box
      sx={{
        width: "100%",
        backgroundColor,
        color: white,
        p: 3,
        borderRadius: "10px",
        mb: "22px",
        minHeight: "100px",
        zIndex: 1000,
        position: "relative",
        ...sx,
      }}
    >
      {children}
    </Box>
  );
};