"use client";

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

export default function ShopPage() {
  // Sample product data for the shop
  const products = [
    {
      id: "1",      name: "Premium Wireless Headphones",      price: "$299.99",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Premium Wireless Headphones",      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onFavorite: () => console.log('Favorited'),
      isFavorited: false
    },
    {
      id: "2",      name: "Smart Fitness Tracker",      price: "$199.99",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Smart Fitness Tracker",      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onFavorite: () => console.log('Favorited'),
      isFavorited: false
    },
    {
      id: "3",      name: "Wireless Charging Station",      price: "$89.99",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Wireless Charging Station",      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onFavorite: () => console.log('Favorited'),
      isFavorited: false
    },
    {
      id: "4",      name: "Bluetooth Speaker Pro",      price: "$149.99",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Bluetooth Speaker Pro",      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onFavorite: () => console.log('Favorited'),
      isFavorited: false
    },
    {
      id: "5",      name: "Smart Home Hub",      price: "$179.99",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Smart Home Hub",      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onFavorite: () => console.log('Favorited'),
      isFavorited: false
    },
    {
      id: "6",      name: "Gaming Mechanical Keyboard",      price: "$159.99",      imageSrc: "/api/placeholder/400/400",      imageAlt: "Gaming Mechanical Keyboard",      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onFavorite: () => console.log('Favorited'),
      isFavorited: false
    }
  ];

  const navItems = [
    { name: "Home", id: "/" },
    { name: "Shop", id: "products" },
    { name: "Features", id: "features" },
    { name: "Testimonials", id: "testimonials" },
    { name: "Contact", id: "contact" }
  ];

  const footerColumns = [
    {
      items: [
        { label: "Shop", href: "products" },
        { label: "Collections", href: "products" },
        { label: "New Arrivals", href: "products" }
      ]
    },
    {
      items: [
        { label: "About", href: "features" },
        { label: "Our Story", href: "features" },
        { label: "Sustainability", href: "features" }
      ]
    },
    {
      items: [
        { label: "Support", href: "contact" },
        { label: "Contact Us", href: "contact" },
        { label: "FAQ", href: "contact" }
      ]
    },
    {
      items: [
        { label: "Policies", href: "https://example.com/privacy" },
        { label: "Privacy", href: "https://example.com/privacy" },
        { label: "Terms", href: "https://example.com/terms" }
      ]
    },
    {
      items: [
        { label: "Follow Us", href: "https://instagram.com" },
        { label: "Instagram", href: "https://instagram.com" },
        { label: "Facebook", href: "https://facebook.com" }
      ]
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="small"
      sizing="mediumSizeLargeTitles"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div className="min-h-screen flex flex-col">
        <NavbarStyleApple
          brandName="Big Size"
          navItems={navItems}
        />
        
        <main className="flex-1">
          <ProductCardThree
            products={products}
            title="Shop Our Collection"
            description="Discover premium quality products with instant add-to-cart functionality. Select your quantity and add items to your cart with ease."
            tag="Premium Quality"
            tagIcon={ShoppingBag}
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            animationType="slide-up"
            useInvertedBackground="noInvert"
            buttons={[
              {
                text: "View All Categories",                href: "/categories"
              },
              {
                text: "Special Offers",                href: "/offers"
              }
            ]}
          />
        </main>
        
        <FooterLogoEmphasis
          logoText="Big Size"
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}