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";
import style from "./index.module.css";
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>
          <div className={style.flex_box}>
            {newData.map((Blog) => (
              <div className={style.box_card}>
                <Card data={Blog} />
              </div>
            ))}
          </div>
        </ContentWrapper>
        <Footer page="INTERAKTO_CODING" />
      </Provider>
    </>
  );
};

export default Index;
