/** کارت محصول در لیست‌ها و کاروسل‌ها */
import Link from "next/link";
import type { ProductSummary } from "@/types/catalog";
import { faNumber } from "@/lib/format";
import { Price } from "@/components/ui/Price";
import { Stars } from "@/components/ui/Stars";
import { Tags } from "@/components/ui/Tags";
import { ProductVisual } from "./ProductVisual";

export function productHref(p: { id: number; slug: string }) {
  return `/p/${p.id}/${p.slug}`;
}

export function ProductCard({ product }: { product: ProductSummary }) {
  return (
    <article className="group relative flex h-full flex-col">
      <Link href={productHref(product)} className="flex h-full flex-col">
        <div className="relative aspect-square overflow-hidden rounded-2xl bg-mist">
          <ProductVisual
            image={product.image}
            sizes="(min-width: 1024px) 20vw, (min-width: 768px) 30vw, 50vw"
            shape={product.shape}
            tone={product.tone}
            label={product.brand.nameEn}
            title={product.name}
            className="size-full transition-transform duration-500 group-hover:scale-[1.04]"
          />
          <div className="absolute start-2.5 top-2.5">
            <Tags tags={product.tags} />
          </div>
          {!product.inStock && (
            <span className="absolute inset-x-2.5 bottom-2.5 rounded-full bg-paper/90 py-1 text-center text-[11px] text-muted">ناموجود</span>
          )}
        </div>
        <div className="flex flex-1 flex-col gap-1 pt-3">
          <p className="text-xs font-bold tracking-wide">{product.brand.name}</p>
          <h3 className="line-clamp-2 min-h-10 text-[13px] leading-5 text-ink-soft">{product.name}</h3>
          {product.colorCount > 1 && <p className="text-[11px] text-muted">{faNumber(product.colorCount)} رنگ</p>}
          <div className="mt-auto space-y-1 pt-1">
            <Stars rating={product.rating} count={product.reviewCount} size={11} />
            <Price price={product.price} compareAt={product.compareAtPrice} size="sm" />
          </div>
        </div>
      </Link>
    </article>
  );
}