"use client";
import React from "react";
import { ThemeProvider } from "@/components/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
import { useRouter } from "next/navigation";

// Placeholder images - Replace with actual images from manifest if available
const BASE_IMAGE_URL = "https://source.unsplash.com/random/800x600/?diamond-ring";
const generateRingData = (count: number) => {
  const rings = [];
  for (let i = 1; i <= count; i++) {
    rings.push({
      id: `ring-${i}`,
      category: "Diamond Rings",      name: `Elegance Diamond Ring ${i}`,
      price: `$${(2500 + i * 150).toLocaleString()}`,
      rating: Math.min(5, 3 + Math.floor(i / 10) + (i % 5) / 5), // Vary rating slightly
      reviewCount: `${Math.floor(i * 3.7) + 10} reviews`,
      imageSrc: `${BASE_IMAGE_URL},${i}`, // Unique image for each ring by adding unique query param
      imageAlt: `Elegance Diamond Ring ${i}`,
    });
  }
  return rings;
};

const luxuryDiamondRings = generateRingData(33);

export default function RingsCollectionPage() {
  const router = useRouter();

  const navbarNavItems = [
    { name: "Home", id: "/" },
    { name: "Rings Collection", id: "/rings-collection" }
  ];

  const handleProductClick = (product: { id: string }) => {
    router.push(`/rings-collection/${product.id}`);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <NavbarStyleFullscreen
        navItems={navbarNavItems}
        brandName="Luxury Jewels"
        logoSrc="/placeholder-logo.svg"
      />
      <div id="rings-collection-header" data-section="rings-collection-header" className="py-20 text-center container mx-auto px-4">
        <h1 className="text-6xl font-extrabold leading-tight text-foreground mb-4">
          Luxury Diamond Rings Collection
        </h1>
        <p className="text-xl text-foreground/80 max-w-3xl mx-auto">
          Discover our exquisite collection of diamond rings, crafted with unparalleled precision and elegance. Each piece tells a unique story of luxury and sophistication, waiting to adorn your special moments.
        </p>
      </div>
      <div id="rings-catalog" data-section="rings-catalog" className="container mx-auto px-4 pb-16">
        <ProductCatalog
          layout="page"
          products={luxuryDiamondRings.map(ring => ({
            ...ring,
            onProductClick: () => handleProductClick(ring)
          }))}
          gridClassName="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
          searchPlaceholder="Search diamond rings..."
          emptyMessage="No diamond rings found matching your criteria."
        />
      </div>
    </ThemeProvider>
  );
}
