import React, { memo } from "react";

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

import css from "./ThemeCurationContents.module.less";
import ThemeCurationProductList from "./ThemeCurationProductList/ThemeCurationProductList";

const Container = SpotlightContainerDecorator(
  { leaveFor: { right: "" }, enterTo: "default-element" },
  "div"
);

export default memo(function ThemeCurationContents({
  contentsIndex,
  isTopButtonClicked,
  shelfNm,
  shelfProductInfos,
  shelfProductInfosLength,
  spotlightId,
}) {
  return (
    <Container
      className={css.container}
      spotlightId={spotlightId}
      data-wheel-point={contentsIndex > 0}
    >
      <h3 data-title-index={contentsIndex} className={css.title}>
        {`${shelfNm} (${shelfProductInfos.length})`}
      </h3>
      <ThemeCurationProductList
        contentsIndex={contentsIndex}
        isTopButtonClicked={isTopButtonClicked}
        shelfProductInfos={shelfProductInfos}
        shelfProductInfosLength={shelfProductInfosLength}
      />
    </Container>
  );
});
