import React, { memo } from "react";

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

import usePriceInfo from "../../../../hooks/usePriceInfo";
import css from "./TodaysDealsCard.module.less";

const SpottableComponent = Spottable("div");

export default memo(function TodaysDealsCard({
  couponFlag,
  freeShippingFlag,
  imageAlt,
  imageSource,
  priceInfo,
  productName,
  todaySpecialFlag,
  ...rest
}) {
  const { originalPrice, discountedPrice, discountRate, discountNumeric } =
    usePriceInfo(priceInfo);

  return (
    <SpottableComponent className={css.item} {...rest}>
      <div>
        <img src={imageSource} alt={imageAlt} />
      </div>

      <div>
        <div>
          <div className={css.todaysDealsTag}>
            {todaySpecialFlag === "N" && <span className={css.specialValue} />}
            {freeShippingFlag === "N" && <span className={css.freeShipping} />}
          </div>
          <div className={css.specialPriceType}>
            {true && <span className={css.tsv} />}
            {true && <span className={css.frees} />}
            {true && <span className={css.bigSale} />}
            {true && <span className={css.shopTimePrice} />}
            {couponFlag === "N" && (
              // @@pyh Todo, COUPON, image resource 유무에 따라 추후 수정 (언어)
              <span className={css.coupon}>{"COUPON"}</span>
            )}
          </div>
        </div>

        <div>
          <h3>{productName}</h3>
          <p>
            {discountRate ? discountedPrice : originalPrice}
            {/* {discountRate && <span>{originalPrice}</span>} */}
            <span>{"$ 22.33"}</span>
          </p>
        </div>
      </div>

      {/* {discountRate && (
        <div>
          <span>{"18%"}</span>
          <span>{"SAVE"}</span>
        </div>
      )} */}
      <div>
        <span>{"18%"}</span>
        <span>{"SAVE"}</span>
      </div>
    </SpottableComponent>
  );
});
