import { Suspense } from "react"
import type { Metadata } from "next"
import { ProductGrid } from "@/components/product/ProductGrid"
import { ProductFilters } from "@/components/product/ProductFilters"
import { products } from "@/data/products"

export const metadata: Metadata = {
  title: "Shop All Tees",
  description: "Browse our full collection of premium t-shirts.",
}

export default async function ProductsPage({
  searchParams,
}: {
  searchParams: Promise<{ category?: string; search?: string }>
}) {
  const { category, search } = await searchParams

  const filtered = products.filter((p) => {
    if (category && p.category !== category) return false
    if (search && !p.name.toLowerCase().includes(search.toLowerCase())) return false
    return true
  })

  return (
    <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
      <h1 className="mb-8 text-3xl font-bold text-white">All T-Shirts</h1>

      <div className="flex gap-8">
        <aside className="hidden w-44 flex-shrink-0 lg:block">
          <Suspense>
            <ProductFilters />
          </Suspense>
        </aside>

        <div className="flex-1">
          <p className="mb-6 text-sm text-silver">{filtered.length} products</p>
          <ProductGrid products={filtered} />
        </div>
      </div>
    </div>
  )
}