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

import classNames from "classnames";

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

import { $L } from "../../../../utils/helperMethods";
import css from "./QuickMenuItem.module.less";

const SpottableComponent = Spottable("div");

export default memo(function QuickMenuItem({
  brandInfo,
  index,
  onQuickMenuClick,
  selectedPatnrId,
  ...rest
}) {
  const { logoImgAlt, logoImgPath, newFlag, patnrId } = brandInfo[index];

  const handleClick = useCallback(
    (patnrId) => {
      onQuickMenuClick && onQuickMenuClick(patnrId);
    },
    [selectedPatnrId]
  );

  return (
    <SpottableComponent
      className={classNames(
        css.item,
        patnrId === selectedPatnrId && css.selected
      )}
      id={patnrId}
      key={patnrId}
      onClick={() => handleClick(patnrId)}
      {...rest}
      spotlightId={"spotlight" + patnrId}
    >
      <img src={logoImgPath} alt={logoImgAlt} />
      {newFlag === "Y" && <div>{$L("NEW")}</div>}
      <span />
    </SpottableComponent>
  );
});
