import React, { FC } from "react";
import { formatPrice } from "../../../helper/ProductHelper";
import { QuantitySelector } from "../../QuantitySelector";
export interface CartSingleProductProps {
  title?: string;
  size?: string;
  price?: number;
  discountedPrice?: number;
  quantity?: number;
  img?: any;
  color?: string;
  tag?: string;
  onClick?: () => void;
}

export const CartSingleProduct: FC<CartSingleProductProps> = ({
  title,
  size,
  price,
  discountedPrice,
  quantity,
  img,
  color,
  tag,
  onClick,
}) => {
  return (
    <div className="flex items-stretch justify-between w-full rounded-[10px] bg-white ">
      <div className="mb-10 2xl:mb-10-2xl">
        <div className="text-body-text md:text-body-text-md lg:text-body-text-lg 2xl:text-body-text-2xl">
          {title}
        </div>
        <div className="text-caption md:text-caption-md lg:text-caption 2xl:text-caption-2xl">
          {`${
            String(color)[0].toUpperCase() + String(color).substring(1)
          } / ${String(size).toUpperCase()}`}
        </div>

        <div className="text-body-text md:text-body-text-md lg:text-body-text-lg 2xl:text-body-text-2xl">
          <div className="flex align-baseline">
            <div className="mr-10 text-body-text md:text-body-text-md lg:text-body-text-lg 2xl:text-body-text-2xl">
              {formatPrice(Number(price))}
            </div>
            {discountedPrice ? (
              <del className=" text-subdued">
                {formatPrice(Number(discountedPrice))}
              </del>
            ) : null}

            {tag ? (
              <div className="bg-quaternary text-body-text lg:text-body-text 2xl:text-caption-2xl rounded py-[2px] px-[6px] ml-10">
                {tag}
              </div>
            ) : null}
          </div>
        </div>

        <div className="flex items-center mt-10">
          <QuantitySelector isGiftCardResult={false} itemIndex={quantity} />
          <button
            className="ml-20 text-caption md:text-caption-md lg:text-caption 2xl:text-caption-2xl 2xl:ml-20-2xl"
            onClick={onClick}
          >
            Remove
          </button>
        </div>
      </div>
      <div className="bg-light w-[90px] h-[120px] 2xl:w-[6.250vw] 2xl:h-[8.333vw]">
        <img
          src={img}
          className="w-90px h-[120px] 2xl:w-[6.250vw] 2xl:h-[8.333vw]"
        />
      </div>
    </div>
  );
};
export default CartSingleProduct;