import { Container } from "@/components/container";
import { products } from "@/lib/products";
import { ProductCard } from "./product-card";

export function ProductGrid({ title }: { title: string }) {
  return (
    <section className="py-12">
      <Container>
        <div className="flex items-center justify-between mb-8">
          <h2 className="text-2xl font-bold text-neutral-900">{title}</h2>
          <div className="h-1 flex-grow mx-4 bg-neutral-100 rounded-full" />
        </div>
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
          {products.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </Container>
    </section>
  );
}