"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { ShoppingCart } from 'lucide-react';

export default function ShopPage() {
  const handleProductClick = (productId: string) => {
    console.log('Product clicked:', productId);
  };

  const handleQuantityChange = (productId: string, quantity: number) => {
    console.log('Quantity changed for product:', productId, 'to:', quantity);
  };

  const handleFavorite = (productId: string) => {
    console.log('Favorite toggled for product:', productId);
  };

  const products = [
    {
      id: "1",      name: "Premium Wireless Headphones",      price: "$299.99",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Premium Wireless Headphones",      onProductClick: () => handleProductClick("1"),
      onQuantityChange: (quantity: number) => handleQuantityChange("1", quantity),
      onFavorite: () => handleFavorite("1"),
      isFavorited: false,
      initialQuantity: 1
    },
    {
      id: "2",      name: "Smart Fitness Watch",      price: "$199.99",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Smart Fitness Watch",      onProductClick: () => handleProductClick("2"),
      onQuantityChange: (quantity: number) => handleQuantityChange("2", quantity),
      onFavorite: () => handleFavorite("2"),
      isFavorited: false,
      initialQuantity: 1
    },
    {
      id: "3",      name: "Minimalist Desk Organizer",      price: "$79.99",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Minimalist Desk Organizer",      onProductClick: () => handleProductClick("3"),
      onQuantityChange: (quantity: number) => handleQuantityChange("3", quantity),
      onFavorite: () => handleFavorite("3"),
      isFavorited: true,
      initialQuantity: 1
    },
    {
      id: "4",      name: "Ergonomic Office Chair",      price: "$459.99",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Ergonomic Office Chair",      onProductClick: () => handleProductClick("4"),
      onQuantityChange: (quantity: number) => handleQuantityChange("4", quantity),
      onFavorite: () => handleFavorite("4"),
      isFavorited: false,
      initialQuantity: 1
    },
    {
      id: "5",      name: "Portable Coffee Maker",      price: "$129.99",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Portable Coffee Maker",      onProductClick: () => handleProductClick("5"),
      onQuantityChange: (quantity: number) => handleQuantityChange("5", quantity),
      onFavorite: () => handleFavorite("5"),
      isFavorited: false,
      initialQuantity: 1
    },
    {
      id: "6",      name: "Professional Camera Lens",      price: "$899.99",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Professional Camera Lens",      onProductClick: () => handleProductClick("6"),
      onQuantityChange: (quantity: number) => handleQuantityChange("6", quantity),
      onFavorite: () => handleFavorite("6"),
      isFavorited: true,
      initialQuantity: 1
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="floatingGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <NavbarLayoutFloatingInline
        brandName="Lorenzo Noya"
        navItems={[
          { name: "Home", id: "/" },
          { name: "Shop", id: "/shop" }
        ]}
        button={{ text: "Connect", href: "#contact" }}
      />
      
      <main className="min-h-screen pt-20">
        <ProductCardThree
          products={products}
          title="Premium Collection"
          description="Discover our curated selection of high-quality products designed to enhance your lifestyle and productivity."
          tag="Limited Stock"
          tagIcon={ShoppingCart}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View All Products", href: "/shop/all" },
            { text: "Contact Support", href: "#contact" }
          ]}
        />
      </main>

      <FooterBaseCard
        logoText="Lorenzo Noya"
        columns={[
          {
            title: "Navigate",            items: [
              { label: "About", href: "#about" },
              { label: "Work", href: "#features" },
              { label: "Testimonials", href: "#testimonials" },
              { label: "Contact", href: "#contact" }
            ]
          },
          {
            title: "Links",            items: [
              { label: "LinkedIn", href: "https://linkedin.com" },
              { label: "Twitter", href: "https://twitter.com" },
              { label: "Webild", href: "https://webild.io" },
              { label: "Email", href: "mailto:lorenzo@webild.io" }
            ]
          },
          {
            title: "Resources",            items: [
              { label: "Resume", href: "#" },
              { label: "Blog", href: "#" },
              { label: "Speaking", href: "#" },
              { label: "Advisories", href: "#" }
            ]
          }
        ]}
        copyrightText="© 2025 Lorenzo Noya. Head of Product @ Webild."
      />
    </ThemeProvider>
  );
}