import Image from "next/image";
import Link from "next/link";
import WishlistButton from "./wishlist-button";

interface ThreeCardProps {
  id: string;
  image: string;
  name: string;
  shortDic: string;
  width?: number;
  height?: number;
  price: string;
  quantity: string;
  link: string;
  promotionalText: string | null;
}
export default function Page(props: ThreeCardProps) {
  const {
    id,
    image,
    name,
    shortDic,
    width = 450,
    height = 250,
    price = 0,
    quantity = 1,
    link = "/",
    promotionalText,
  } = props;

  return (
    <div
      className={`bg-white h-[415px] w-auto lg:w-[${width}px] rounded-[8px] overflow-hidden shadow-[0px_1px_8px_0px_rgba(0,0,0,0.1)]`}
    >
      <div className="bg-[#F8F8F8] relative">
        <WishlistButton className="absolute right-1 top-1" id={id} />
        <Image
          alt="banner"
          loading="lazy"
          quality={50}
          width={width}
          height={height}
          decoding="async"
          className="!h-[250px] !w-auto lg:!w-[450px] object-cover m-auto object-center"
          src={image || "/assets/images/thumbs-noimage.webp"}
        />
        {promotionalText && (
          <span className="absolute top-0 left-0 text-[12px] bg-primary text-white uppercase rounded-br-lg py-[2px] px-[8px]">
            {promotionalText}
          </span>
        )}{" "}
      </div>
      <div className="px-[16px] py-[12px]">
        <Link href={link}>
          <h2 className="pb-[10px] cursor-pointer text-neutral-black-87 font-medium text-[15px] lg:text-[18px] leading-[18.9px] lg:leading-[22px]">
            {name}
          </h2>
        </Link>
        <div
          className="text-[#848080] text-[14px] line-clamp-2 h-10"
          dangerouslySetInnerHTML={{ __html: shortDic }}
        />
      </div>
      <div className="px-[16px] pb-[12px] flex items-center justify-between">
        <div className="flex flex-col gap-[2px]">
          <div className="flex items-center gap-[6px]">
            <span className="text-[13px] leading-[20px] text-neutral-black-54">
              Starting price
            </span>
            <span className="inline-flex items-center bg-primary/10 text-primary text-[11px] font-semibold leading-[16px] rounded-full px-[8px] py-[1px]">
              Qty: {quantity}
            </span>
          </div>
          <div className="flex items-baseline gap-[6px]">
            <p className="text-neutral-black-87 font-semibold text-[18px] lg:text-[22px] leading-[26px] tracking-tight">
              ${(Number(price))?.toFixed(2) || "0.00"}
            </p>
            {Number(quantity) > 1 && (
              <span className="text-[12px] leading-[16px] text-neutral-black-54">
                (${(Number(price) / Number(quantity)).toFixed(2)}/ea)
              </span>
            )}
          </div>
        </div>
        <Link href={link}>
          <div className="text-[16px] leading-[22px] border border-primary rounded-full px-6 py-2 bg-primary text-white">
            Shop now
          </div>
        </Link>
      </div>
    </div>
  );
}