import { notFound } from "next/navigation"
import { Header } from "@/components/header"
import { ProductGrid } from "@/components/product-grid"
import { Footer } from "@/components/footer"
import { CartProvider } from "@/lib/cart-context"
import { categories, getProductsByCategory } from "@/lib/data"

interface CategoryPageProps {
  params: Promise<{
    slug: string
  }>
}

export default async function CategoryPage({ params }: CategoryPageProps) {
  const { slug } = await params
  const category = categories.find((c) => c.slug === slug)

  if (!category) {
    notFound()
  }

  const products = getProductsByCategory(slug)

  return (
    <CartProvider>
      <div className="min-h-screen flex flex-col">
        <Header />
        <main className="flex-1">
          {/* Category Header */}
          <div className="bg-primary py-12">
            <div className="container mx-auto px-4 text-center">
              <h1 className="text-3xl md:text-4xl font-bold text-primary-foreground mb-2">{category.name}</h1>
              <p className="text-primary-foreground/80">{products.length} products found</p>
            </div>
          </div>

          {/* Breadcrumb */}
          <div className="bg-muted py-4">
            <div className="container mx-auto px-4">
              <nav className="text-sm text-muted-foreground">
                <span className="hover:text-primary cursor-pointer">Home</span>
                <span className="mx-2">/</span>
                <span className="text-foreground">{category.name}</span>
              </nav>
            </div>
          </div>

          {products.length > 0 ? (
            <ProductGrid products={products} />
          ) : (
            <div className="container mx-auto px-4 py-16 text-center">
              <p className="text-muted-foreground text-lg">No products found in this category.</p>
            </div>
          )}
        </main>
        <Footer />
      </div>
    </CartProvider>
  )
}
