website/src/components/home/ProductCard.tsx

"use client";

import Image from "next/image";
import Link from "next/link";
import type { Product } from "@/data/home";
import { productPath } from "@/lib/product-path";

type ProductCardProps = {
  product: Product;
  className?: string;
};

export default function ProductCard({ product, className = "" }: ProductCardProps) {
  const href = product.href ?? productPath(product);
  const hoverSrc = product.imageHover;

  return (
    <article
      dir="rtl"
      className={`group relative flex h-[491px] w-full flex-col rounded-[5px] border border-[#8e8e8e]/30 bg-white transition-colors duration-300 ease-out hover:border-ink ${className}`}
    >
      <Link href={href} className="flex min-h-0 flex-1 flex-col">
        {/* Clip media only — keep border on the outer box so it never gets cut off */}
        <span className="relative block min-h-0 flex-1 overflow-hidden rounded-t-[4px] p-2.5">
          <span className="relative block h-full w-full overflow-hidden rounded-[5px]">
            <Image
              src={product.image}
              alt={product.nameFa}
              fill
              sizes="(max-width: 768px) 50vw, 324px"
              className={`object-cover object-top transition-transform duration-500 ease-out ${
                hoverSrc ? "group-hover:translate-x-full" : "group-hover:scale-[1.04]"
              }`}
            />
            {hoverSrc ? (
              <Image
                src={hoverSrc}
                alt=""
                fill
                sizes="(max-width: 768px) 50vw, 324px"
                className="object-cover object-top -translate-x-full transition-transform duration-500 ease-out group-hover:translate-x-0"
                aria-hidden
              />
            ) : null}
          </span>
        </span>

        <span className="flex shrink-0 flex-col gap-2 px-3.5 pb-3.5 pt-1">
          <span className="w-full text-right">
            <span className="line-clamp-1 block text-[15px] font-medium text-ink">
              {product.nameFa}
            </span>
            <span
              dir="ltr"
              className="mt-0.5 line-clamp-1 block w-full text-right font-montserrat text-[9px] font-light uppercase tracking-[0.2em] text-[#afafaf]"
            >
              {product.nameEn}
            </span>
          </span>

          <span
            dir="ltr"
            className="mt-1 flex items-baseline justify-start gap-1.5 border-t border-ink/15 pt-3 pb-0.5 transition-colors duration-300 ease-out group-hover:border-ink"
          >
            <span className="font-montserrat text-base font-normal leading-none text-ink sm:text-[17px]">
              {product.price}
            </span>
            <span className="text-[9px] leading-none text-[#878787]">IRT</span>
          </span>
        </span>
      </Link>

      <button
        type="button"
        aria-label="افزودن به علاقه‌مندی"
        className="absolute end-3 top-4 z-10 transition-opacity hover:opacity-70"
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
        }}
      >
        <Image
          src="/images/home/icons/bookmark.svg"
          alt=""
          width={24}
          height={24}
          unoptimized
        />
      </button>
    </article>
  );
}