"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";

export default function ForPage() {
  return (
    <ThemeProvider defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold">
      <main>
        <div id="productcatalog" data-section="productcatalog">
        <ProductCatalog
          layout="section"
          products={[
            {
              id: "1",
              name: "Pro Tennis Racket",
              price: 299.99,
              imageSrc: "https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg",
              imageAlt: "Pro Tennis Racket",
              rating: 4.8,
              reviewCount: 124,
              category: "Rackets",
              onProductClick: () => {}
            },
            {
              id: "2",
              name: "Custom Tennis Shoes",
              price: 189.99,
              imageSrc: "https://img.b2bpic.net/free-photo/futuristic-moon-background_23-2150930890.jpg",
              imageAlt: "Custom Tennis Shoes",
              rating: 4.9,
              reviewCount: 89,
              category: "Footwear",
              onProductClick: () => {}
            },
            {
              id: "3",
              name: "Performance Tennis Apparel",
              price: 129.99,
              imageSrc: "https://img.b2bpic.net/free-photo/futuristic-city-architecture_23-2151918947.jpg",
              imageAlt: "Performance Tennis Apparel",
              rating: 4.7,
              reviewCount: 156,
              category: "Apparel",
              onProductClick: () => {}
            },
            {
              id: "4",
              name: "Professional Tennis Bag",
              price: 159.99,
              imageSrc: "https://img.b2bpic.net/free-photo/futuristic-moon-background_23-2150930734.jpg",
              imageAlt: "Professional Tennis Bag",
              rating: 4.6,
              reviewCount: 72,
              category: "Accessories",
              onProductClick: () => {}
            }
          ]}
          searchPlaceholder="Search custom tennis gear..."
          emptyMessage="No tennis products available"
          className="w-full"
          gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
          cardClassName="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow"
          imageClassName="w-full h-64 object-cover rounded-t-lg"
          searchClassName="mb-8"
          toolbarClassName="flex flex-col gap-4 mb-8"
        />
        </div>
      </main>
    </ThemeProvider>
  );
}
