moalem-shop/src/components/ui/ProductCard.tsx

import Image from "next/image";
import Link from "next/link";
import MixedText from "@/components/MixedText";
import { formatPrice, toFaDigits } from "@/lib/format";
import type { ProductCardData } from "@/lib/types";

export default function ProductCard({ product }: { product: ProductCardData }) {
  const { href, title, image, price, oldPrice, percent, inStock } = product;
  const hasOldPrice = price !== null && oldPrice !== null && oldPrice > price;

  return (
    <Link
      href={href}
      className="flex h-full flex-col rounded-lg border border-line bg-white p-2 transition hover:border-brand/40 hover:shadow-[0_6px_20px_rgba(0,0,0,0.07)]"
    >
      <span className="relative mb-2 block aspect-square w-full overflow-hidden rounded-md bg-white">
        {image ? (
          <Image
            src={image}
            alt={title}
            fill
            sizes="(max-width: 768px) 45vw, 180px"
            className="object-contain p-1"
          />
        ) : (
          <span className="flex size-full items-center justify-center text-[11px] text-body">
            بدون تصویر
          </span>
        )}
        {percent > 0 && (
          <span className="absolute right-1.5 top-1.5 rounded-full bg-brand px-2 py-0.5 text-[11px] font-bold text-white">
            {toFaDigits(percent)}٪
          </span>
        )}
      </span>

      <span className="clamp-2 mb-3 min-h-[42px] px-1 text-[12.5px] leading-[21px] text-ink-soft">
        <MixedText>{title}</MixedText>
      </span>

      {/* The old-price line always occupies its row — rendered empty when there
          is no discount — so a discounted card is exactly as tall as the rest
          and every card in a carousel lines up. */}
      <span className="mt-auto flex h-[44px] flex-col items-start justify-end px-1 pb-1">
        {price !== null && inStock ? (
          <>
            <span
              className={`h-[17px] text-[11px] text-body ${hasOldPrice ? "line-through" : ""}`}
            >
              {hasOldPrice ? formatPrice(oldPrice) : ""}
            </span>
            <span className="text-[15px] font-bold text-ink">
              {formatPrice(price)}
              <span className="mr-1 text-[11px] font-normal text-body">تومان</span>
            </span>
          </>
        ) : (
          <>
            <span className="h-[17px]" />
            <span className="text-[12px] text-body">ناموجود</span>
          </>
        )}
      </span>
    </Link>
  );
}