"use client";

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

export default function ShopPage() {
  const products = [
    {
      id: '1',
      name: 'VitaBoost Complete Multivitamin',
      price: '$29.99',
      imageSrc: 'https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?w=400&h=400&fit=crop',
      imageAlt: 'VitaBoost Complete Multivitamin',
      initialQuantity: 1,
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onProductClick: () => console.log('Product clicked'),
      onFavorite: () => console.log('Product favorited'),
      isFavorited: false
    },
    {
      id: '2',
      name: 'VitaBoost Omega-3 Fish Oil',
      price: '$24.99',
      imageSrc: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=400&h=400&fit=crop',
      imageAlt: 'VitaBoost Omega-3 Fish Oil',
      initialQuantity: 1,
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onProductClick: () => console.log('Product clicked'),
      onFavorite: () => console.log('Product favorited'),
      isFavorited: false
    },
    {
      id: '3',
      name: 'VitaBoost Vitamin D3 Premium',
      price: '$19.99',
      imageSrc: 'https://images.unsplash.com/photo-1550572017-edd951b7163f?w=400&h=400&fit=crop',
      imageAlt: 'VitaBoost Vitamin D3 Premium',
      initialQuantity: 1,
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onProductClick: () => console.log('Product clicked'),
      onFavorite: () => console.log('Product favorited'),
      isFavorited: false
    },
    {
      id: '4',
      name: 'VitaBoost Probiotics Advanced',
      price: '$34.99',
      imageSrc: 'https://images.unsplash.com/photo-1559757175-0eb30cd8c063?w=400&h=400&fit=crop',
      imageAlt: 'VitaBoost Probiotics Advanced',
      initialQuantity: 1,
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onProductClick: () => console.log('Product clicked'),
      onFavorite: () => console.log('Product favorited'),
      isFavorited: false
    },
    {
      id: '5',
      name: 'VitaBoost Protein Powder Vanilla',
      price: '$39.99',
      imageSrc: 'https://images.unsplash.com/photo-1593095948071-474c5cc2989d?w=400&h=400&fit=crop',
      imageAlt: 'VitaBoost Protein Powder Vanilla',
      initialQuantity: 1,
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onProductClick: () => console.log('Product clicked'),
      onFavorite: () => console.log('Product favorited'),
      isFavorited: false
    },
    {
      id: '6',
      name: 'VitaBoost Magnesium Complex',
      price: '$22.99',
      imageSrc: 'https://images.unsplash.com/photo-1550572017-edd951b7163f?w=400&h=400&fit=crop',
      imageAlt: 'VitaBoost Magnesium Complex',
      initialQuantity: 1,
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onProductClick: () => console.log('Product clicked'),
      onFavorite: () => console.log('Product favorited'),
      isFavorited: false
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="medium"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <NavbarStyleApple
        brandName="VitaBoost"
        navItems={[
          { name: "Home", id: "/" },
          { name: "Shop", id: "/shop" }
        ]}
      />
      
      <main className="min-h-screen">
        <ProductCardThree
          products={products}
          title="Shop VitaBoost Products"
          description="Add your favorite wellness products to cart with our convenient quantity selector"
          tag="Premium Quality"
          tagIcon={ShoppingCart}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "View All Products",              onClick: () => console.log('View all products')
            }
          ]}
        />
      </main>
      
      <FooterSimple
        columns={[
          {
            title: "Products",            items: [
              { label: "Vitamins", href: "#" },
              { label: "Proteins", href: "#" },
              { label: "Minerals", href: "#" },
              { label: "All Products", href: "#" }
            ]
          },
          {
            title: "Company",            items: [
              { label: "About Us", href: "#" },
              { label: "Our Mission", href: "#" },
              { label: "Careers", href: "#" },
              { label: "Blog", href: "#" }
            ]
          },
          {
            title: "Support",            items: [
              { label: "Contact", href: "#" },
              { label: "FAQ", href: "#faq" },
              { label: "Shipping Info", href: "#" },
              { label: "Returns", href: "#" }
            ]
          },
          {
            title: "Legal",            items: [
              { label: "Privacy Policy", href: "#" },
              { label: "Terms of Service", href: "#" },
              { label: "Disclaimer", href: "#" }
            ]
          }
        ]}
        bottomLeftText="© 2025 VitaBoost. All rights reserved."
        bottomRightText="Made for wellness"
      />
    </ThemeProvider>
  );
}