import React, { memo, useCallback } from "react";

import classNames from "classnames";

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

import css from "./CategoryNavItem.module.less";

const SpottableComponent = Spottable("div");

export default memo(function CategoryNavItem({
  categoryInfos,
  currentCategoryCode,
  onCategoryNavClick,
  index,
  ...rest
}) {
  const {
    lgCatCd: categoryCode,
    lgCatNm: categoryName, //
  } = categoryInfos[index];

  const handleClick = useCallback(
    (categoryCode) => {
      onCategoryNavClick && onCategoryNavClick(categoryCode);
    },
    [categoryCode, currentCategoryCode]
  );

  return (
    <SpottableComponent
      className={classNames(
        css.category,
        categoryCode === currentCategoryCode && css.selected
      )}
      key={categoryCode}
      onClick={() => handleClick(categoryCode)}
      {...rest}
    >
      <div>
        <span className={css[`category-icon-${categoryCode}`]} />
      </div>
      <strong>{categoryName}</strong>
    </SpottableComponent>
  );
});
