import React from "react";
import Box from "@mui/material/Box";

import Typography from "@mui/material/Typography";

const PageTitle = ({title = "", image = null}) => {

  return (
    <Box
      className="animate__animated animate__fadeIn"
      sx={{
        position: "relative",
        minHeight: "300px",
        backgroundImage: `url("${image}")`,
        backgroundSize: "cover",
        backgroundPosition: "top center",
        color: "white",
        textAlign: "center",
        overflow: "hidden", // Ensures the dim layer stays inside the box
        display:"flex",
      }}
    >
     
      
      {/* Title */}
      {/* <Typography
        variant="h3"
        className="main-title"
        sx={{
          position: "relative",
          zIndex: 2,
          margin:"auto auto",
          color: image ? "white" : "black"
        }}
      >
        {title?.toUpperCase() || " "}
      </Typography> */}
    </Box>
  );
};

export default PageTitle;
