amber/src/components/PageTitle/PageTitle.jsx

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",
      }}
    >
      {/* Overlay */}
      <Box
        sx={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: image ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 0)", // Adjust opacity to control dimness
          zIndex: 1,
        }}
      />
      
      {/* Title */}
      <Typography
        variant="h3"
        sx={{
          position: "relative",
          zIndex: 2,
          margin:"auto auto",
          color: image ? "white" : "black"
        }}
      >
        {title?.toUpperCase() || " "}
      </Typography>
    </Box>
  );
};

export default PageTitle;