'use client';

import { ThemeProvider } from '@/components/provider/ThemeProvider';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';

const navItems = [
  { name: "Home", id: "/" },
  { name: "Earrings", id: "/earrings" },
  { name: "Necklaces", id: "/necklaces" },
  { name: "Bracelets", id: "/bracelets" }
];

const earringsProducts = Array.from({ length: 12 }, (_, i) => ({
  id: `earring-${i + 1}`,
  brand: "JewelCo",  name: `Elegant Earring ${i + 1}`,
  price: `$${(Math.random() * 100 + 50).toFixed(2)}`,
  rating: Math.floor(Math.random() * 5) + 1,
  reviewCount: `${Math.floor(Math.random() * 200) + 10} reviews`,
  imageSrc: `https://picsum.photos/seed/earring${i+1}/400/300`,
  imageAlt: `Elegant Earring ${i + 1}`,
}));

export default function EarringsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <NavbarLayoutFloatingOverlay
        navItems={navItems}
        brandName="JewelCo"
        logoSrc="https://images.unsplash.com/photo-1596701830501-1b0337c7689d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTgzODJ8MHwxfHNlYXJjaHw1fHxqZXdlbHJ5JTIwbG9nb3xlbnwwfHx8fDE3MTU0NjcwNDd8MA&ixlib=rb-4.0.3&q=80&w=1080"
      />
      <div id="earrings-collection" data-section="earrings-collection">
        <ProductCardTwo
          title="Earrings Collection"
          description="Discover our exquisite range of earrings, perfect for every occasion."
          products={earringsProducts}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
        />
      </div>
    </ThemeProvider>
  );
}
