import { Grid } from "@mui/material";
import ContentWrapper from "../ContentWrapper/ContentWrapper";
import Card from "../Blog/Card";
import { useEffect, useState } from "react";
import Header from "../Header/Header";
import Banner from "../Blog/Banner";
import Footer from "../Footer/Footer";
import { store } from "../redux/store";
import { Provider } from "react-redux";
const Index = () => {
  window.scrollTo({ top: 0, behavior: "instant" });
  const [data, setData] = useState([]);
  const newData = data.reverse();
  useEffect(() => {
    fetch(
      `https://curriculum-app-api.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[property][_eq]=aKadmy`
    )
      .then((result) => {
        result.json().then((res) => {
          setData(res.data.reverse());
        }); 
      })
      .catch((error) => {
        // toast.error("Could not process data, please try again later!");
      });
  }, []);

  return (
    <>
      <Provider store={store}>
      <Banner data={newData} />
      <ContentWrapper>
        <h2
          style={{
            color: "#00548E",
            marginBottom: "10px",
            textAlign: "center",
          }}
        >
          Trending Blogs
        </h2>
        <Grid
          container
          spacing={2}
          alignItems="center"
          justifyContent={"center"}
        >
          {newData.map((Blog) => (
            <Grid item xs={12} sm={6} md={4} lg={4} xl={4}>
              <Card data={Blog} />
            </Grid>
          ))}
        </Grid>
      </ContentWrapper>
      <Footer page="INTERAKTO_CODING" />
      </Provider>
    </>
  );
};

export default Index;
