import Image from "next/image";

import { cn } from "@/lib/utils";

export interface ProductCardProps {
  imageSrc?: string;
  imageAlt?: string;
  discountBadge?: string;
  showWishlist?: boolean;
  name?: string;
  rating?: number;
  soldCount?: string;
  price?: string;
  oldPrice?: string;
  discountText?: string;
  showAddToCart?: boolean;
  addToCartLabel?: string;
  onAddToCart?: () => void;
  size?: "default" | "compact";
  className?: string;
}

export default function ProductCard({
  imageSrc = "/images/artisan-sauce-collection.png",
  imageAlt = "",
  discountBadge,
  showWishlist = false,
  name,
  rating,
  soldCount,
  price,
  oldPrice,
  discountText,
  showAddToCart = false,
  addToCartLabel = "Add to cart",
  onAddToCart,
  size = "default",
  className,
}: ProductCardProps) {
  const compact = size === "compact";

  return (
    <article
      className={cn(
        "w-full overflow-hidden bg-white shadow-[0_12px_30px_rgba(15,23,42,0.08)]",
        compact ? "max-w-[215px] rounded-lg" : "max-w-[235px] rounded-2xl",
        className
      )}
    >
      <div className={cn("relative overflow-hidden bg-gray-100", compact ? "aspect-[1.18/1] rounded-t-lg" : "aspect-[1.05/1] rounded-t-2xl")}>
        <Image
          src={imageSrc}
          alt={imageAlt}
          fill
          sizes={compact ? "160px" : "200px"}
          className="object-cover"
        />

        {discountBadge && (
          <span className={cn("absolute rounded-full bg-[#00AFC1] font-semibold text-white", compact ? "left-2 top-2 px-2 py-0.5 text-[8px]" : "left-4 top-3 px-3 py-1 text-[10px]")}>
            {discountBadge}
          </span>
        )}

        {showWishlist && (
          <button
            type="button"
            className={cn("absolute flex items-center justify-center rounded-full bg-black/35 text-white backdrop-blur-sm transition-colors hover:bg-black/50", compact ? "right-2 top-2 h-7 w-7" : "right-4 top-3 h-8 w-8")}
            aria-label="Add to wishlist"
          >
            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z"
              />
            </svg>
          </button>
        )}
      </div>

      <div className={cn(compact ? "space-y-2 p-3" : "space-y-3 p-4")}>
        {name && (
          <h3 className={cn("line-clamp-2 font-medium text-gray-800", compact ? "text-xs leading-4" : "text-sm leading-5")}>
            {name}
          </h3>
        )}

        {(rating || soldCount) && (
          <div className={cn("flex items-center gap-1.5 text-gray-500", compact ? "text-[11px]" : "text-xs")}>
            {rating && (
              <>
                <svg className={cn("text-[#FFB800]", compact ? "h-3.5 w-3.5" : "h-4 w-4")} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path d="m10 1.5 2.55 5.16 5.7.83-4.13 4.02.98 5.68L10 14.51l-5.1 2.68.98-5.68L1.75 7.49l5.7-.83L10 1.5Z" />
                </svg>
                <span className="font-medium text-gray-700">{rating.toFixed(1)}</span>
              </>
            )}
            {rating && soldCount && <span>|</span>}
            {soldCount && <span>{soldCount}</span>}
          </div>
        )}

        {(price || oldPrice || discountText) && (
          <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
            {price && <span className={cn("font-semibold text-gray-900", compact ? "text-sm" : "text-sm")}>{price}</span>}
            {oldPrice && <span className={cn("text-red-500 line-through", compact ? "text-[10px]" : "text-[11px]")}>{oldPrice}</span>}
            {discountText && <span className="text-[11px] font-medium text-red-500">{discountText}</span>}
          </div>
        )}

        {showAddToCart && (
          <button
            type="button"
            onClick={onAddToCart}
            className={cn("w-full rounded-full bg-[#e4e4e8] font-medium text-gray-700 transition-colors hover:bg-[#d8d8de]", compact ? "h-8 text-xs" : "h-11 text-sm")}
          >
            {addToCartLabel}
          </button>
        )}
      </div>
    </article>
  );
}
