"use client";

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

export default function ShopPage() {
  // Sample product data for the shop
  const products = [
    {
      id: "1",      name: "Classic Cotton T-Shirt",      price: "$29.99",      imageSrc: "/products/tshirt-1.jpg",      imageAlt: "Classic Cotton T-Shirt",      initialQuantity: 1,
      onProductClick: () => console.log("Product clicked"),
      onQuantityChange: (quantity: number) => console.log(`Quantity changed: ${quantity}`),
      onFavorite: () => console.log("Added to favorites"),
      isFavorited: false
    },
    {
      id: "2",      name: "Premium Denim Jacket",      price: "$89.99",      imageSrc: "/products/jacket-1.jpg",      imageAlt: "Premium Denim Jacket",      initialQuantity: 1,
      onProductClick: () => console.log("Product clicked"),
      onQuantityChange: (quantity: number) => console.log(`Quantity changed: ${quantity}`),
      onFavorite: () => console.log("Added to favorites"),
      isFavorited: false
    },
    {
      id: "3",      name: "Stylish Sneakers",      price: "$119.99",      imageSrc: "/products/sneakers-1.jpg",      imageAlt: "Stylish Sneakers",      initialQuantity: 1,
      onProductClick: () => console.log("Product clicked"),
      onQuantityChange: (quantity: number) => console.log(`Quantity changed: ${quantity}`),
      onFavorite: () => console.log("Added to favorites"),
      isFavorited: false
    },
    {
      id: "4",      name: "Leather Crossbody Bag",      price: "$79.99",      imageSrc: "/products/bag-1.jpg",      imageAlt: "Leather Crossbody Bag",      initialQuantity: 1,
      onProductClick: () => console.log("Product clicked"),
      onQuantityChange: (quantity: number) => console.log(`Quantity changed: ${quantity}`),
      onFavorite: () => console.log("Added to favorites"),
      isFavorited: false
    },
    {
      id: "5",      name: "Wool Blend Sweater",      price: "$69.99",      imageSrc: "/products/sweater-1.jpg",      imageAlt: "Wool Blend Sweater",      initialQuantity: 1,
      onProductClick: () => console.log("Product clicked"),
      onQuantityChange: (quantity: number) => console.log(`Quantity changed: ${quantity}`),
      onFavorite: () => console.log("Added to favorites"),
      isFavorited: false
    },
    {
      id: "6",      name: "Casual Canvas Pants",      price: "$49.99",      imageSrc: "/products/pants-1.jpg",      imageAlt: "Casual Canvas Pants",      initialQuantity: 1,
      onProductClick: () => console.log("Product clicked"),
      onQuantityChange: (quantity: number) => console.log(`Quantity changed: ${quantity}`),
      onFavorite: () => console.log("Added to favorites"),
      isFavorited: false
    }
  ];

  return (
    <ThemeProvider 
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <NavbarStyleFullscreen 
        brandName="Billy"
        navItems={[
          { name: "Home", id: "/" },
          { name: "Products", id: "products" },
          { name: "About", id: "about" },
          { name: "Contact", id: "contact" },
          { name: "Shop", id: "products" }
        ]}
        bottomLeftText="Fashion Forward"
        bottomRightText="hello@billyclothing.com"
      />
      
      <main className="min-h-screen pt-20">
        <ProductCardThree
          products={products}
          title="Shop Collection"
          description="Discover our curated selection of premium fashion items. Add your favorites to cart and enjoy free shipping on orders over $75."
          tag="Free Shipping"
          tagIcon={ShoppingBag}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "View All Categories",              href: "#categories"
            },
            {
              text: "Sale Items",              href: "#sale"
            }
          ]}
          ariaLabel="Shop products section"
        />
      </main>
      
      <FooterBase 
        logoText="Billy"
        copyrightText="© 2025 Billy Fashion Store. All rights reserved."
        columns={[
          {
            title: "Shop",            items: [
              { label: "New Arrivals", href: "#products" },
              { label: "Best Sellers", href: "#products" },
              { label: "Collections", href: "#products" }
            ]
          },
          {
            title: "Customer",            items: [
              { label: "About Us", href: "#about" },
              { label: "Contact", href: "#contact" },
              { label: "FAQs", href: "#" }
            ]
          },
          {
            title: "Support",            items: [
              { label: "Shipping Info", href: "#" },
              { label: "Returns", href: "#" },
              { label: "Size Guide", href: "#" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}