import React, { FC } from "react";
import { formatPrice } from "../../../helper/ProductHelper";
import { Button } from "../../Button";
import { ColorSwatch } from "../../ColorSwatch";
import ProgressBar from "../../ProgressBar";

export interface SingleGiftItemProps {
  title?: string;
  price?: number;
  discountedPrice?: number;
  img?: any;
  colors?: any;
  onClick?: () => void;
  tag?: any;
}

export const SingleGiftItem: FC<SingleGiftItemProps> = ({
  onClick,
  price,
  discountedPrice,
  img,
  colors,
  title,
}) => {
  return (
    <div className="flex items-stretch justify-between bg-white rounded-10 px-20 w-full 2xl:px-20-2xl 2xl:rounded-[0.694vw]">
      <div className="pr-[17px] 2xl:pr-[1.181vw] w-[calc(100%-90px)] 2xl:w-[calc(100%-6.250vw)]">
        <div className="flex justify-between items-start ">
          <div className="mb-10 mr-10 2xl:mb-10-2xl 2xl:mr-10-2xl">
            <div className="text-body-text md:text-body-text-md lg:text-body-text-lg 2xl:text-body-text-2xl ">
              {title?.toLocaleUpperCase()}
            </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}
              </div>
            </div>
          </div>
          <div>
            <Button
              label="Add"
              variants="primary"
              size="small"
              onClick={onClick}
            />
          </div>
        </div>
        <div className="flex flex-wrap mb-4 items-center">
          {colors.map((e: any, i: number) => (
            <ColorSwatch
              color={e}
              variants="product"
              className=""
              active={i === 0 ? true : false}
              key={i}
            />
          ))}
        </div>
        <div className="">
          <ProgressBar width={30} />
        </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 SingleGiftItem;