import Image from "next/image";
import { Button } from "../ui/button";
import Link from "next/link";
import WishlistButton from "./WishlistButton";

function ProductCard({
  title,
  description,
  price,
  imageUrl,
  link,
  brand,
  productId,
  wishlisted = false,
  isFeatured = false,
}: {
  title: string;
  description: string;
  price: number;
  imageUrl: string;
  link: string;
  brand?: string | null;
  productId: string;
  wishlisted?: boolean;
  isFeatured?: boolean;
}) {
  return (
    <article
      className="bg-accent overflow-hidden w-full max-w-68 card-shadow p-3 flex flex-col gap-3 rounded-2xl"
      data-purpose="product-card"
    >
      {/* BEGIN: ImageContainer */}
      <div
        className="relative w-full rounded-[1.75rem] overflow-hidden aspect-square"
        data-purpose="image-wrapper"
      >
        {/* Main Product Image */}
        <Link href={link} prefetch className="absolute inset-0">
          <Image
            alt={title}
            className="w-full h-full object-cover"
            src={imageUrl}
            fill
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          />
        </Link>
        {/* Featured Badge Overlay */}
        {isFeatured && (
          <div className="absolute top-3 left-3">
            <span className="bg-zinc-200/30 text-white text-[10px] px-3 py-1 rounded-full font-medium">
              Featured
            </span>
          </div>
        )}
        <WishlistButton
          productId={productId}
          initialWishlisted={wishlisted}
          className="absolute top-0 right-5.5"
        />
      </div>
      {/* BEGIN: ProductDetails */}

      <div className="px-1 pb-1" data-purpose="product-info">
        <Link
          href={link}
          prefetch
          className="text-lg text-[#1a1a1a] font-semibold mb-0.5 tracking-[-0.01em]"
        >
          {title}
        </Link>
        {brand && <p className="text-[#a1a1aa] text-xs font-medium mb-1">{brand}</p>}
        <p className="line-clamp-2 text-[11px] leading-4 text-[#696969]">
          {description}
        </p>
      </div>
      {/* END: ProductDetails */}
      {/* BEGIN: ProductActions */}
      <div
        className="flex items-center justify-between px-1 pb-2"
        data-purpose="price-and-cta"
      >
        {/* Buy Now Button */}
        <Link href={link} prefetch className="w-full">
          <Button className="flex w-full items-center justify-between gap-1.5 px-1 py-1.5 h-8">
            <div className="px-3 py-0.5 bg-white rounded-full">
              <span className="text-[11px] font-bold text-black">
                <span>&#x09F3;</span> {price.toLocaleString()}
              </span>
            </div>
            <div className="bg-white rounded-full p-1">
              <svg
                className="h-3 w-3 text-black transform -rotate-45"
                fill="none"
                stroke="currentColor"
                strokeWidth="3"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M14 5l7 7m0 0l-7 7m7-7H3"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                ></path>
              </svg>
            </div>
          </Button>
        </Link>
      </div>
      {/* END: ProductActions */}
    </article>
  );
}

export default ProductCard;