import React, { useEffect } from "react";
import "./New_In_Store.css";
import Store_Product_Card from "./store_product_card/Store_Product_Card";
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 for Your Pets"}
        viewShowAllButton
        newLottie
      />
      <div className="main_content_div">
        <div className="grid_view_div">
          {data?.slice(0, 12)?.map((item) => (
            <Store_Product_Card
              item={item}
              key={item.id}
              id={item.id}
              img={item?.image}
              name={item.name}
              discount={item.discount}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

export default New_In_Store;
