import React, { useEffect, useState } from "react";
import { Box, Grid, Typography } from "@mui/material";
import ContentWrapper from "../ContentWrapper/ContentWrapper";
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
import ThreeFormFields from "../form/ThreeFormFields";
import { store } from "../redux/store";
import { Provider } from "react-redux";

const Blog = (props) => {
  window.scrollTo({ top: 0, behavior: "instant" });

  return (
    <>
      <Provider store={store}>
        <ContentWrapper>
          <Header color={"#015C9F"} />
          <Grid container color={"#0348A8"} spacing={2}>
            <Grid item xs={12} md={8}>
              {props.blog?.title && <h1>{props.blog?.title}</h1>}
              <Typography variant="body2" my={0.6}>
                Published On: {props.blog?.date} | 5 min Read
              </Typography>
              {props.blog?.img && (
                <img
                  src={`https://management.beanstalkedu.com/assets/${props.blog?.img}`}
                  width={"100%"}
                  style={{ borderRadius: "8px" }}
                  alt={props.blog?.meta}
                />
              )}
              {props.blog?.preview_text && (
                <Typography my={4}>
                  <div
                    dangerouslySetInnerHTML={{
                      __html: props.blog?.preview_text,
                    }}
                  />
                </Typography>
              )}
            </Grid>
            <Grid item xs={12} md={4}>
              <Box sx={{ background: "#DEF0FD", p: 3 }}>
                <Typography>Get in Touch</Typography>
                <ThreeFormFields formName="Blogs" />
              </Box>
            </Grid>
          </Grid>
        </ContentWrapper>
        <Footer page="INTERAKTO_CODING" />
      </Provider>
    </>
  );
};

export default Blog;
