import React from "react";

import classNames from "classnames";

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

import TButton from "../../../components/TButton/TButton";
import TIconButton, {
  ICON_TYPES,
} from "../../../components/TIconButton/TIconButton";
import css from "./RecommendedKeywords.module.less";

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

export default function RecommendedKeywords({
  keywords,
  onPrev,
  onNext,
  hasPrevPage,
  hasNextPage,
  handleSearchSubmit,
}) {
  return (
    <div className={css.container}>
      {hasPrevPage && (
        <TIconButton
          iconType={ICON_TYPES.leftArrow}
          className={classNames(css.arrow, css.arrowLeft)}
          onClick={onPrev}
        />
      )}
      <Container className={css.keywordsGrid}>
        {keywords.map((keyword, index) => (
          <TButton
            key={index}
            spotlightId={index === 0 ? "first-keyword-button" : undefined}
            className={classNames(css.keywordBox)}
            onClick={() => handleSearchSubmit(keyword.keywd)}
          >
            {keyword.keywd}
          </TButton>
        ))}
      </Container>
      {hasNextPage && (
        <TIconButton
          iconType={ICON_TYPES.rightArrow}
          className={classNames(css.arrow, css.arrowRight)}
          onClick={onNext}
        />
      )}
    </div>
  );
}
