import Header from "@/components/Header";
import Footer from "@/components/Footer";
import ProductCard from "@/components/ProductCard";
import { fetchProducts } from "@/lib/api";

export default async function Page() {
  const products = await fetchProducts();

  return (
    <main>
      <Header />
      <section style={{ maxWidth: 1100, margin: "32px auto", padding: "0 24px" }}>
        <h1 style={{ marginBottom: 16 }}>Featured products</h1>
        <div style={{ display: "grid", gap: 16, gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))" }}>
          {products.slice(0, 8).map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </section>
      <Footer />
    </main>
  );
}