import React, { useEffect } from "react";
import "./New_In_Store.css";
import Store_Product_Card from "./store_product_card/Store_Product_Card";
import Common_Heading_Holder from "../../common-components/common_heading_holder/Common_Heading_Holder";
import Common_Heading_Round_holder from "../../common-components/common_Heading_Round_holder/Common_Heading_Round_holder";

const New_In_Store = ({ data }) => {
  return (
    <section className="New_In_Store">
      <Common_Heading_Round_holder
        headingText={"New in Store"}
        viewShowAllButton
        newLottie
      />

      <div className="main_content_div">
        {data?.length > 8 ? (
          <div className="row">
            <div className="col-xl-6 col-md-12">
              <div className="row">
                <div className="col-6 custom_inner_col">
                  <div className="main_img_div">
                    <Store_Product_Card
                      img={data?.[0]?.image}
                      name={data?.[0]?.name}
                      id={data?.[0]?.id}
                    />
                  </div>
                </div>
                <div className="col-6 custom_inner_col">
                  <div className="main_img_div">
                    <Store_Product_Card
                      img={data?.[1]?.image}
                      name={data?.[1]?.name}
                      id={data?.[1]?.id}
                    />
                  </div>
                </div>
              </div>
            </div>

            <div className="col-xl-6 col-md-12">
              <div className="grid_view_div">
                {data?.slice(2, 8)?.map((item) => {
                  return (
                    <Store_Product_Card
                      id={item?.id}
                      img={item?.image}
                      name={item?.name}
                      discount={item?.discount}
                    />
                  );
                })}
              </div>
            </div>
          </div>
        ) : (
          <div className="row">
            <div className="col-md-12">
              <div className="grid_view_div new_grid">
                {data?.slice(2, 8)?.map((item) => {
                  return (
                    <Store_Product_Card
                      id={item?.id}
                      img={item?.image}
                      name={item?.name}
                      discount={item?.discount}
                    />
                  );
                })}
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

export default New_In_Store;
