salar-store/components/ProductCard.tsx

import Link from "next/link";
import { discountPercent, formatPrice } from "@/lib/format";
import type { Product } from "@/lib/data";
import { Media } from "./Media";

export function ProductCard({ product }: { product: Product }) {
  const off = discountPercent(product.price, product.oldPrice);
  const unavailable = product.stock === 0 || product.price === 0;

  return (
    <Link href={product.href || "/products"} className="relative flex h-full min-h-[300px] flex-col overflow-hidden rounded-xl bg-white p-2">
      {off > 0 && (
        <span className="absolute top-2 left-2 z-[2] rounded-full bg-brand px-2.5 py-1.5 font-oswald text-[13px] font-bold leading-none text-white shadow-md">
          {off}%
        </span>
      )}
      <div className="relative">
        <Media src={product.image} alt={product.name} className="aspect-square rounded-lg" sizes="220px" />
      </div>
      <h3 className="mt-2 px-1 text-[13px] leading-6 text-ink line-clamp-2 min-h-12">{product.name}</h3>
      <div className="mt-auto px-1 pb-1 pt-2">
        {unavailable ? (
          <span className="text-sm text-zinc-400">ناموجود</span>
        ) : (
          <div className="ms-auto flex flex-col items-end leading-tight">
            {product.oldPrice ? (
              <span className="text-[12px] font-medium text-brand line-through">
                {formatPrice(product.oldPrice)}
              </span>
            ) : null}
            <span className="text-[15px] font-bold text-[#333]">
              {formatPrice(product.price)}
              <span className="mr-1 text-[12px] font-normal">تومان</span>
            </span>
          </div>
        )}
      </div>
    </Link>
  );
}