import React, { memo } from "react";

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

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

const ItemContainer = Spottable("div");

export default memo(function SearchItemCard({
  dcPrice,
  partnerLogo,
  partnerName,
  price,
  reviewGrade,
  soldout,
  thumbnail,
  title,
  contentId,
  ...rest
}) {
  return (
    <ItemContainer className={css.card} {...rest}>
      <div className={css.imageBox}>
        <img src={thumbnail} alt={title} />
      </div>
      <div className={css.infoWrap}>
        <p className={css.title}>{title}</p>
        <div className={css.priceWrap}>
          <span className={css.price}>{price}</span>
          <strong className={css.dcPrice}>{dcPrice}</strong>
        </div>
      </div>
    </ItemContainer>
  );
});
