import React, { memo } from "react";

import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";

import css from "./FeaturedCategoryProductGrid.module.less";
import FeaturedCategoryProductGridItem from "./FeaturedCategoryProductGridItem/FeaturedCategoryProductGridItem";

const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
);

const FeaturedCategoryProductGrid = ({
  brandCategoryProductDetailInfo,
  catCd,
  contentsIndex,
  handleItemFocus,
  patnrId,
  selectedCatCdLv1,
  selectedCatCdLv2,
  selectedCategoryLv2Infos,
  selectedPatncNm,
  spotlightId,
  shelfOrder,
  shelfTitle,
  catNm,
}) => {
  return (
    <Container className={css.container}>
      <ul>
        {brandCategoryProductDetailInfo.map(
          (brandCategoryProductDetailInfoItem, itemIndex) => (
            <FeaturedCategoryProductGridItem
              brandCategoryProductDetailInfoItem={
                brandCategoryProductDetailInfoItem
              }
              selectedPatncNm={selectedPatncNm}
              catCd={catCd}
              contentsIndex={contentsIndex}
              handleItemFocus={handleItemFocus}
              itemIndex={itemIndex}
              key={`${spotlightId}-${itemIndex}`}
              patnrId={patnrId}
              selectedCatCdLv1={selectedCatCdLv1}
              selectedCatCdLv2={selectedCatCdLv2}
              selectedCategoryLv2Infos={selectedCategoryLv2Infos}
              spotlightId={spotlightId}
              shelfOrder={shelfOrder}
              shelfTitle={shelfTitle}
              catNm={catNm}
            />
          )
        )}
      </ul>
    </Container>
  );
};

export default memo(FeaturedCategoryProductGrid);
