import React, { memo } from "react";

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

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

const ThemeContainer = Spottable("div");

export default memo(function SearchThemeCard({
  endTime,
  keyword,
  partnerLogo,
  partnerName,
  startTime,
  title,
  contentId,
  ...rest
}) {
  return (
    <ThemeContainer className={css.card} {...rest}>
      <h2 className={css.title}>{title}</h2>
      <ul className={css.keywordWrap}>
        {keyword &&
          keyword.map((item, index) => (
            <li key={index} className={css.keywordList}>
              <span className={css.keyword}># {item}</span>
            </li>
          ))}
      </ul>
    </ThemeContainer>
  );
});
