import React, { useEffect, useState } from "react";
import style from "./mainProductSection.module.css";
import OurProduct from "../utils/outProduct";
import { FadeInContainer } from "../utils/animation/fadeInContainer";

const MainProductSection = (props) => {
  return (
    <React.Fragment>
      <div className={`${style.main_product_section}`}>
        <div className={style.main_product}>
          {props.siteText && (
            <>
              <div className={`primary_heading ${style.title}`}>
                {props.siteText.title}
              </div>
              <OurProduct
                count={3}
                singleCount={3}
                id={props.siteText.content[0].split("id[")[1].split("]")[0]}
                weight={true}
              />
            </>
          )}
        </div>
      </div>
    </React.Fragment>
  );
};

export default MainProductSection;
