"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ShoppingBag } from 'lucide-react';

export default function ShopPage() {
  const products = [
    {
      id: "1",      name: "TIMBUK2 Classic Messenger Bag",      price: "$119.00",      imageSrc: "/api/placeholder/400/400",      imageAlt: "TIMBUK2 Classic Messenger Bag",      initialQuantity: 1,
      onQuantityChange: (quantity: number) => console.log(`Quantity changed to: ${quantity}`),
      onProductClick: () => console.log("Product clicked")
    },
    {
      id: "2",      name: "Premium Wireless Headphones",      price: "$89.99",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Premium Wireless Headphones",      initialQuantity: 1,
      onQuantityChange: (quantity: number) => console.log(`Quantity changed to: ${quantity}`),
      onProductClick: () => console.log("Product clicked")
    },
    {
      id: "3",      name: "Ergonomic Office Chair",      price: "$299.00",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Ergonomic Office Chair",      initialQuantity: 1,
      onQuantityChange: (quantity: number) => console.log(`Quantity changed to: ${quantity}`),
      onProductClick: () => console.log("Product clicked")
    },
    {
      id: "4",      name: "Smart Water Bottle",      price: "$45.50",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Smart Water Bottle",      initialQuantity: 1,
      onQuantityChange: (quantity: number) => console.log(`Quantity changed to: ${quantity}`),
      onProductClick: () => console.log("Product clicked")
    },
    {
      id: "5",      name: "Bluetooth Gaming Mouse",      price: "$67.99",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Bluetooth Gaming Mouse",      initialQuantity: 1,
      onQuantityChange: (quantity: number) => console.log(`Quantity changed to: ${quantity}`),
      onProductClick: () => console.log("Product clicked")
    },
    {
      id: "6",      name: "Organic Cotton T-Shirt",      price: "$29.99",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Organic Cotton T-Shirt",      initialQuantity: 1,
      onQuantityChange: (quantity: number) => console.log(`Quantity changed to: ${quantity}`),
      onProductClick: () => console.log("Product clicked")
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <NavbarStyleApple
        brandName="Mandarin"
        navItems={[
          { name: "Home", id: "/" }
        ]}
      />
      
      <main className="min-h-screen">
        <ProductCardThree
          products={products}
          title="Shop Premium Products"
          description="Add your favorite items to cart and enjoy our curated selection of quality products"
          tag="Best Sellers"
          tagIcon={ShoppingBag}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          ariaLabel="Product shop section"
        />
      </main>
      
      <FooterLogoReveal
        logoText="Mandarin"
        leftLink={{ text: "Privacy Policy", href: "#" }}
        rightLink={{ text: "Terms of Service", href: "#" }}
      />
    </ThemeProvider>
  );
}