'use client';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import ButtonTextShift from '@/components/button/ButtonTextShift/ButtonTextShift';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

import { usePathname } from 'next/navigation';

export default function CollectionPage() {
  const pathname = usePathname();
  const category = pathname.split('/').pop()?.replace(/-/g, ' ') || 'All Products';

  const navItems = [
    { name: "Home", id: "/" },
    { name: "Cart", id: "/cart" },
    { name: "Checkout", id: "/checkout" },
    { name: "Order Conf", id: "/order-confirmation" },
    { name: "Products", id: "/products/1" },
    { name: "Collections", id: "/collections/all" }
  ];

  // Dummy product data for the collection page
  const products = [
    {
      id: "prod1",      brand: "BrandA",      name: "Stylish Shirt",      price: "$29.99",      rating: 4.5,
      reviewCount: "120",      imageSrc: "https://via.placeholder.com/300x400?text=Product+1",      imageAlt: "Stylish Shirt"
    },
    {
      id: "prod2",      brand: "BrandB",      name: "Comfy Jeans",      price: "$49.99",      rating: 4.2,
      reviewCount: "85",      imageSrc: "https://via.placeholder.com/300x400?text=Product+2",      imageAlt: "Comfy Jeans"
    },
    {
      id: "prod3",      brand: "BrandC",      name: "Running Shoes",      price: "$79.99",      rating: 4.8,
      reviewCount: "200",      imageSrc: "https://via.placeholder.com/300x400?text=Product+3",      imageAlt: "Running Shoes"
    },
    {
        id: "prod4",        brand: "BrandD",        name: "Elegant Dress",        price: "$89.99",        rating: 4.7,
        reviewCount: "150",        imageSrc: "https://via.placeholder.com/300x400?text=Product+4",        imageAlt: "Elegant Dress"
    },
    {
        id: "prod5",        brand: "BrandE",        name: "Smart Watch",        price: "$199.99",        rating: 4.6,
        reviewCount: "230",        imageSrc: "https://via.placeholder.com/300x400?text=Product+5",        imageAlt: "Smart Watch"
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered navItems={navItems} brandName="Webild" logoSrc="https://via.placeholder.com/40" />
      </div>
      <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <div id="product-collection" data-section="product-collection">
          <ProductCardTwo
            animationType="slide-up"
            gridVariant="three-columns-all-equal-width"
            title={`Collection: ${category}`}
            description="Explore our curated selection of products."
            products={products}
            className="my-10"
            textboxLayout="default" 
            useInvertedBackground={false} 
          />
          <div className="flex justify-center mt-8 space-x-4">
            <ButtonTextShift
              text="View More"
              onClick={() => alert("Loading more products...")}
              disabled={false}
              ariaLabel="View more products"
              className="px-6 py-3"
              textClassName="font-semibold"
            />
            <ButtonTextShift
              text="Filter"
              onClick={() => alert("Opening filter options...")}
              disabled={false}
              ariaLabel="Filter products"
              className="px-6 py-3"
              textClassName="font-semibold"
            />
          </div>
        </div>
      </main>
      <FooterBaseReveal
        logoText="Webild"
        columns={[
          {
            title: "Company",            items: [
              { label: "About Us", href: "/" },
              { label: "Contact", href: "/" }
            ]
          },
          {
            title: "Legal",            items: [
              { label: "Privacy Policy", href: "/" },
              { label: "Terms of Service", href: "/" }
            ]
          }
        ]}
        copyrightText="© 2023 Webild. All rights reserved."
      />
    </ThemeProvider>
  );
}
