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

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

export default async function ProductPage({ params }: ProductPageProps) {
  const { slug } = await params
  const product = getProductBySlug(slug)

  if (!product) {
    notFound()
  }

  const relatedProducts = allProducts.filter((p) => p.category === product.category && p.id !== product.id).slice(0, 4)

  return (
    <CartProvider>
      <div className="min-h-screen flex flex-col">
        <Header />
        <main className="flex-1">
          {/* 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="hover:text-primary cursor-pointer capitalize">
                  {product.category.replace("-", " ")}
                </span>
                <span className="mx-2">/</span>
                <span className="text-foreground">{product.name}</span>
              </nav>
            </div>
          </div>

          <ProductDetail product={product} />

          {relatedProducts.length > 0 && (
            <div className="bg-muted py-4">
              <ProductGrid products={relatedProducts} title="Related Products" />
            </div>
          )}
        </main>
        <Footer />
      </div>
    </CartProvider>
  )
}
