import Image from "next/image";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import {
  productImage,
  productUrl,
  slugifyFa,
  type Product,
} from "@/lib/meshkee";

export function ApiProductCard({
  product,
  headingLevel = 2,
}: {
  product: Product;
  headingLevel?: 2 | 3;
}) {
  const title = product.nameFa || product.title;
  const href = productUrl(product);
  const Heading = headingLevel === 3 ? "h3" : "h2";
  const categoryTitle = product.categoryNameFa || product.categoryName || "آینه هوشمند";
  const categoryHref = product.categoryId
    ? `/products/category/${product.categoryId}/${slugifyFa(categoryTitle)}`
    : null;

  return (
    <article className="catalog-product-card">
      <Link className="catalog-product-image" href={href}>
        <Image
          src={productImage(product) || "/images/hero.jpg"}
          alt={title}
          fill
          sizes="(max-width: 620px) 100vw, (max-width: 1000px) 50vw, 33vw"
        />
      </Link>
      <div className="catalog-product-copy">
        <span>
          {categoryHref ? <Link href={categoryHref}>{categoryTitle}</Link> : categoryTitle}
        </span>
        <Heading><Link href={href}>{title}</Link></Heading>
        <div>
          <p>{product.store?.inStock ? "موجود" : "برای سفارش تماس بگیرید"}</p>
          <Link href={href} aria-label={`مشاهده ${title}`}>
            جزئیات
            <ArrowLeft />
          </Link>
        </div>
      </div>
    </article>
  );
}