mashinify/src/components/Products.tsx

import Image from "next/image";
import Link from "next/link";
import {
  formatCondition,
  formatPrice,
  productCategory,
  productTitle,
} from "@/lib/api/user-products";
import type { UserProductListItem } from "@/lib/api/types";

type ProductsProps = {
  items: UserProductListItem[];
  total?: number;
  query?: string;
  showHeader?: boolean;
  showMoreLink?: boolean;
};

export function Products({
  items,
  total = 0,
  query,
  showHeader = true,
  showMoreLink = true,
}: ProductsProps) {
  return (
    <section id="products" className={showHeader ? "section" : undefined}>
      <div className={showHeader ? "container-page" : undefined}>
        {showHeader ? (
          <div className="section-head">
            <p className="section-kicker">Stock Machines</p>
            <h2 className="section-title">محصولات موجود</h2>
            <p className="section-desc">
              {query
                ? `نتایج جستجو برای «${query}»`
                : "منتخب ماشین‌آلات سنگین و صنعتی از فروشگاه ماشینیفای؛ برای جزئیات و قیمت، استعلام بگیرید."}
            </p>
          </div>
        ) : query ? (
          <p className="mb-6 text-sm text-muted">نتایج جستجو برای «{query}»</p>
        ) : null}
        {items.length === 0 ? (
          <div className="border border-line bg-surface px-6 py-14 text-center">
            <p className="text-base font-bold text-brand-ink">
              در حال حاضر محصول منتشرشده‌ای یافت نشد.
            </p>
            <p className="mt-2 text-sm text-muted">
              به‌محض انتشار آگهی‌های جدید، اینجا نمایش داده می‌شوند.
            </p>
            <Link href="/user-products" className="btn-primary mt-6 inline-flex">
              مشاهده همه محصولات
            </Link>
          </div>
        ) : (
          <>
            <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
              {items.map((product) => {
                const title = productTitle(product);
                const category = productCategory(product);
                const condition = formatCondition(product.condition);
                const price = formatPrice(product.price, product.priceCurrency);
                const href = `/user-products/${product.slug}`;

                return (
                  <article
                    key={product.id}
                    className="group flex h-full flex-col overflow-hidden border border-line bg-surface transition duration-300 hover:-translate-y-1 hover:border-brand/40"
                  >
                    <Link
                      href={href}
                      className="relative block aspect-[4/3] overflow-hidden bg-[#e8eef4]"
                    >
                      {product.imageUrl ? (
                        <Image
                          src={product.imageUrl}
                          alt={title}
                          fill
                          unoptimized
                          className="object-cover transition duration-500 group-hover:scale-[1.04]"
                          sizes="(max-width: 768px) 100vw, 25vw"
                        />
                      ) : (
                        <div className="absolute inset-0 bg-[linear-gradient(135deg,#d7e0ea,#eef3f8)]" />
                      )}
                      {condition ? (
                        <span className="absolute left-3 top-3 bg-brand-ink/90 px-2.5 py-1 text-xs text-white">
                          {condition}
                        </span>
                      ) : null}
                      {product.promoted ? (
                        <span className="absolute right-3 top-3 bg-brand px-2.5 py-1 text-xs text-white">
                          ویژه
                        </span>
                      ) : null}
                    </Link>

                    <div className="flex flex-1 flex-col p-4">
                      {product.titleEn ? (
                        <p className="font-industrial text-[0.68rem] tracking-[0.14em] text-brand">
                          {product.titleEn}
                        </p>
                      ) : null}
                      <h3 className="mt-1 text-base font-extrabold leading-7 text-brand-ink">
                        <Link href={href}>{title}</Link>
                      </h3>
                      {category ? (
                        <p className="mt-2 text-sm text-muted">{category}</p>
                      ) : null}
                      {price ? (
                        <p
                          dir="ltr"
                          className="font-industrial mt-2 w-full text-left text-sm font-bold tracking-wide text-brand-ink"
                        >
                          {price}
                        </p>
                      ) : null}
                      <div className="mt-auto pt-4">
                        <Link href={href} className="btn-secondary w-full !min-h-11 text-sm">
                          جزئیات و استعلام
                        </Link>                      </div>
                    </div>
                  </article>
                );
              })}
            </div>

            {showMoreLink ? (
              <div className="mt-8 text-center">
                <Link href="/user-products" className="btn-primary">
                  {total > items.length ? "محصولات بیشتر" : "همه محصولات"}
                </Link>
              </div>
            ) : null}          </>
        )}
      </div>
    </section>
  );
}