import React from "react";

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

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

const SpottableComponent = Spottable("li");

export default function OnSaleProductCard({ saleProduct, ...rest }) {
  const { imgUrl, prdtId, prdtNm, priceInfo } = saleProduct;

  const originalPrice = priceInfo.split("|")[0];
  const salePrice = priceInfo.split("|")[1];
  const salePercentage = priceInfo.split("|").reverse()[0];

  return (
    <SpottableComponent
      {...rest}
      className={css.container}
      spotlightId={prdtId}
    >
      <div>
        <img src={imgUrl} alt={prdtNm} />
        {salePercentage && <span>{salePercentage}</span>}
      </div>
      <div className={css.test}>
        <h3>{prdtNm}</h3>
        <p>
          {salePrice}
          <span>{originalPrice}</span>
        </p>
      </div>
    </SpottableComponent>
  );
}
