import Link from "next/link";
import Image from "next/image";
import { formatPaise } from "@/lib/format";
import { parseImages, type ProductCardData } from "@/lib/types";
import WishlistButton from "@/components/WishlistButton";
import QuickAddButton from "@/components/QuickAddButton";

export default function ProductCard({ product }: { product: ProductCardData }) {
  const image = parseImages(product.images)[0];

  return (
    <div className="group overflow-hidden rounded-xl border border-rose-100 bg-white transition hover:shadow-md">
      <Link href={`/product/${product.slug}`} className="block">
        <div className="relative aspect-square overflow-hidden bg-rose-50">
          <Image
            src={image}
            alt={product.name}
            fill
            className="object-cover transition duration-300 group-hover:scale-105"
            sizes="(min-width: 1024px) 25vw, (min-width: 640px) 33vw, 50vw"
          />
          <WishlistButton
            item={{
              productId: product.id,
              name: product.name,
              slug: product.slug,
              image,
              basePrice: product.salePrice ?? product.basePrice,
              minOrderQty: product.minOrderQty,
            }}
            className="absolute right-2 top-2"
          />
        </div>
        <div className="px-3 pt-3">
          <div className="text-[11px] font-medium uppercase tracking-wide text-rose-500">{product.category.name}</div>
          <div className="mt-0.5 text-sm font-semibold text-stone-800">{product.name}</div>
          <div className="mt-1 flex items-baseline gap-1.5">
            {product.salePrice != null && product.salePrice < product.basePrice ? (
              <>
                <span className="text-base font-bold text-rose-800">{formatPaise(product.salePrice)}</span>
                <span className="text-xs text-stone-400 line-through">{formatPaise(product.basePrice)}</span>
              </>
            ) : (
              <span className="text-base font-bold text-rose-800">{formatPaise(product.basePrice)}</span>
            )}
          </div>
        </div>
      </Link>
      <div className="px-3 pb-3 pt-2.5">
        <QuickAddButton product={product} />
      </div>
    </div>
  );
}