import { Grid, ThemeProvider, Typography } from "@mui/material";
import { buildTheme } from "../../infrastructure/theme/theme";

export default function Intro({ image, subtitle, height }) {
  return (
    <>
      <ThemeProvider theme={buildTheme()}>
        <Grid
          mb={5}
          container
          sx={{ position: "relative", textAlign: "center" }}
        >
          <Grid item xs={12}>
            <img
              src={image}
              alt={subtitle}
              style={{
                width: "100%",
                height: height ? height : "400px",
                objectFit: "cover",
                objectPosition: "center",
                filter: "brightness(45%)",
              }}
            />
            <Grid
              container
              alignItems="center"
              justifyContent="center"
              sx={{
                position: "absolute",
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%)",
                width: "100%",
              }}
            >
              <Grid item sx={{ maxWidth: "625px" }}>
                <Typography variant="h0" color="#fff" sx={{fontWeight: "600"}}>
                  {subtitle}
                </Typography>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </ThemeProvider>
    </>
  );
}