import { getMarketplaceProductById, getMarketplaceProductsByStore } from "@/lib/marketplace-data";
import { ProductGrid } from "@/components/ProductGrid";
import MarketplaceProductDetailClient from "@/components/MarketplaceProductDetailClient";
import { notFound } from "next/navigation";
import { Store } from "lucide-react";

export const revalidate = 60;

export default async function ProdutoIdPage(props: { params: Promise<{ id: string }> }) {
  const params = await props.params;
  const product = await getMarketplaceProductById(params.id);
  
  if (!product) {
    return notFound();
  }

  const relatedProducts = product.store 
    ? await getMarketplaceProductsByStore(product.store.id, 10) 
    : [];

  return (
    <div className="bg-white min-h-screen pb-16">
      <div className="container mx-auto px-4 lg:px-8 py-12">
        <MarketplaceProductDetailClient product={product} />
      </div>

      {/* Related Products */}
      {relatedProducts.length > 0 && (
        <div className="pt-16 border-t border-gray-100">
          <ProductGrid 
            products={relatedProducts.filter(p => p.id !== product.id)} 
            title="Mais produtos dessa loja"
            subtitle="Itens recomendados do mesmo fornecedor"
            icon={<Store className="w-6 h-6 text-violet-600" />}
          />
        </div>
      )}
    </div>
  );
}