import Header from "../Header/Header";
import ContentWrapper from "../ContentWrapper/ContentWrapper";
import style from "./Banner.module.css";
import { Box, Typography } from "@mui/material";

export default function Banner({ data }) {
  return (
    <section className={style.out_box}>
      <div className={style.shape_box}>
        <div className={style.image_box}>
          <div className={style.header}>
            <ContentWrapper>
              <Header color={"#015C9F"} />
            </ContentWrapper>
          </div>
          <div className={style.box}>
            <h2 style={{ color: "#00548E", marginBottom: "10px" }}>
              Blog Post
            </h2>
            <i>Explore our latest preschool Insights and Stories</i>
          </div>
        </div>
      </div>
      <ContentWrapper>
        <Box
          sx={{
            height: { xs: 480, sm: 460 },
            marginTop: { xs: "-340px", sm: "-440px" },
            borderRadius: "12px",
            backgroundImage: `url(
              "https://management.beanstalkedu.com/assets/${data?.[0]?.img}"
            )`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover",
            backgroundPosition: "center",
            position: "relative",
          }}
        >
          <Box
            sx={{
              backgroundColor: "rgba(0, 0, 0, 0.6)",
              borderRadius: "12px",
              color: "#ffffff",
              p: { xs: 2, sm: 4 },
              position: "absolute",
              bottom: 0,
              m: { xs: 2, sm: 4 },
            }}
          >
            <h2>{data?.[0]?.title}</h2>
            <p>{data?.[0]?.meta_description}</p>

            <Box textAlign={"right"}>
              <a href={`/blogs/${data?.[0]?.slug}`}>
                <button
                  style={{
                    background: "#012E6C",
                    color: "white",
                    borderRadius: "8px",
                  }}
                >
                  <Typography variant="body2">
                    Continue Reading&nbsp;
                    <img src="/assets/white_right.png" width={"14px"} />
                  </Typography>
                </button>
              </a>
            </Box>
          </Box>
        </Box>
      </ContentWrapper>
      <br />
      <br />
      <br />
      <br />
    </section>
  );
}
