"use client"

import { ProductCard } from "./product-card"
import type { Product } from "@/lib/data"

interface ProductGridProps {
  products: Product[]
  title?: string
}

export function ProductGrid({ products, title }: ProductGridProps) {
  return (
    <section className="py-10">
      <div className="container mx-auto px-4">
        {title && (
          <div className="flex items-center justify-between mb-8">
            <h2 className="text-2xl md:text-3xl font-bold text-foreground">{title}</h2>
            <button className="text-primary hover:text-primary/80 font-medium text-sm transition-colors">
              View All →
            </button>
          </div>
        )}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
          {products.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </div>
    </section>
  )
}
