import { ArrowUpLeft, Phone } from "lucide-react";
import Link from "next/link";
import { productPath, type Product } from "../lib/meshkee";

export default function ProductCard({ product }: { product: Product }) {
  const href = productPath(product);
  const title = product.nameFa || product.title;
  const category =
    product.categoryNameFa || product.categoryName || "ماشین‌آلات صنعتی";
  const image =
    product.thumbnailUrl ||
    product.thumbnail ||
    product.image ||
    "/assets/product-quadding.jpg";

  return (
    <article className="product-card">
      <Link className="product-card__image" href={href}>
        <img src={image} alt={title} />
        <span>ماشین‌آلات</span>
        <i>
          <ArrowUpLeft />
        </i>
      </Link>
      <div className="product-card__body">
        <small>{category}</small>
        <h3>
          <Link href={href}>{title}</Link>
        </h3>
        <p dir="ltr">{product.title}</p>
        <div>
          <code>{product.categoryName || "SAMAN ANDISH"}</code>
          <a href="tel:+982188530256">
            استعلام قیمت
            <Phone size={15} />
          </a>
        </div>
      </div>
    </article>
  );
}