import React, { memo } from "react";

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

import IcLiveShow from "../../../../../../assets/icon/tag/tag-liveshow.svg";
import css from "./SearchShowCard.module.less";

const CardContainer = Spottable("div");

export default memo(function SearchShowCard({
  endTime,
  liveFlag,
  partnerId,
  partnerLogo,
  partnerName,
  startTime,
  thumbnail,
  title,
  contentId,
  ...rest
}) {
  return (
    <CardContainer className={css.card} {...rest}>
      <div className={css.imageBox}>
        {liveFlag === "Y" && (
          <span className={css.liveBadge}>
            <img src={IcLiveShow} alt="LIVE" />
          </span>
        )}
        <img src={thumbnail} alt={title} />
      </div>
      <p className={css.title}>{title}</p>
    </CardContainer>
  );
});
