import { getProducts } from "@/lib/woocommerce";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import ProductCard from "@/components/product/ProductCard";

export const metadata = {
  title: "Products - ManoonOils",
  description: "Browse our collection of premium natural oils for hair and skin care.",
};

export default async function ProductsPage() {
  let products: any[] = [];
  try {
    products = await getProducts();
  } catch (e) {
    console.log('Failed to fetch products during build');
  }
  
  const publishedProducts = products.filter((p) => p.status === "publish");

  return (
    <main className="min-h-screen pt-16 md:pt-20">
      <Header />
      
      <section className="py-20 px-4">
        <div className="max-w-7xl mx-auto">
          <h1 className="text-4xl md:text-5xl font-serif text-center mb-16">
            All Products
          </h1>
          
          {publishedProducts.length === 0 ? (
            <p className="text-center text-foreground-muted">No products available</p>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
              {publishedProducts.map((product, index) => (
                <ProductCard key={product.id} product={product} index={index} />
              ))}
            </div>
          )}
        </div>
      </section>
      
      <Footer />
    </main>
  );
}