import { Carousel } from "@/components/ui/Carousel";
import { ProductCard } from "@/components/ui/ProductCard";
import { getProducts, productHref, type Product } from "@/lib/meshkee";

export async function SimilarProducts({
  categoryId,
  excludeProductId,
  contactPhone,
}: {
  categoryId?: string;
  excludeProductId: string;
  contactPhone?: string;
}) {
  if (!categoryId) return null;

  const { items } = await getProducts({ categoryId, pageSize: 9 });
  const products: Product[] = items.filter((p) => p.id !== excludeProductId).slice(0, 8);

  if (products.length === 0) return null;

  return (
    <div className="mt-12 border-t border-border pt-10">
      <h2 className="mb-5 flex items-center gap-2 text-lg font-bold">
        <span className="h-2 w-2 shrink-0 rounded-full bg-red" aria-hidden />
        محصولات مشابه
      </h2>
      <Carousel ariaLabel="محصولات مشابه">
        {products.map((product) => (
          <ProductCard
            key={product.id}
            name={product.name}
            brand={product.brand ?? ""}
            price={product.price}
            oldPrice={product.oldPrice}
            discount={product.discount}
            image={product.image ?? "/images/placeholder.svg"}
            href={productHref(product)}
            contactPhone={contactPhone}
            variantId={product.variantId}
            slug={product.slug}
          />
        ))}
      </Carousel>
    </div>
  );
}