"use client";

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

export default function ShopPage() {
  // Sample products data for the shop
  const products = [
    {
      id: '1',
      name: 'Red Rose Bouquet',
      price: '$45.00',
      imageSrc: 'https://images.unsplash.com/photo-1518895949257-7621c3c786d7?w=400&h=400&fit=crop',
      imageAlt: 'Beautiful red rose bouquet',
      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (qty: number) => console.log('Quantity changed:', qty)
    },
    {
      id: '2',
      name: 'White Lily Arrangement',
      price: '$38.00',
      imageSrc: 'https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=400&h=400&fit=crop',
      imageAlt: 'Elegant white lily arrangement',
      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (qty: number) => console.log('Quantity changed:', qty)
    },
    {
      id: '3',
      name: 'Sunflower Collection',
      price: '$32.00',
      imageSrc: 'https://images.unsplash.com/photo-1470509037663-253afd7f0f51?w=400&h=400&fit=crop',
      imageAlt: 'Bright sunflower collection',
      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (qty: number) => console.log('Quantity changed:', qty)
    },
    {
      id: '4',
      name: 'Mixed Tulip Bundle',
      price: '$42.00',
      imageSrc: 'https://images.unsplash.com/photo-1520637836862-4d197d17c0a0?w=400&h=400&fit=crop',
      imageAlt: 'Colorful mixed tulip bundle',
      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (qty: number) => console.log('Quantity changed:', qty)
    },
    {
      id: '5',
      name: 'Orchid Elegance',
      price: '$65.00',
      imageSrc: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
      imageAlt: 'Sophisticated orchid arrangement',
      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (qty: number) => console.log('Quantity changed:', qty)
    },
    {
      id: '6',
      name: 'Peony Paradise',
      price: '$55.00',
      imageSrc: 'https://images.unsplash.com/photo-1563241527-3004b7be0ffd?w=400&h=400&fit=crop',
      imageAlt: 'Luxurious peony paradise bouquet',
      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (qty: number) => console.log('Quantity changed:', qty)
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <NavbarStyleCentered
        navItems={[
          { name: "Home", id: "/" },
          { name: "Flowers", id: "products" },
          { name: "About", id: "about" },
          { name: "Reviews", id: "testimonials" },
          { name: "Contact", id: "contact" },
          { name: "Shop", id: "/shop" }
        ]}
        button={{ text: "Order Now", href: "products" }}
        brandName="Fiasko"
      />

      <main className="min-h-screen pt-20">
        <ProductCardThree
          products={products}
          title="Shop Our Beautiful Flowers"
          description="Add your favorite flowers to cart and create the perfect arrangement for any occasion"
          tag="Fresh Flowers"
          tagIcon={ShoppingBag}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View All Categories", href: "products" },
            { text: "Contact Us", href: "contact" }
          ]}
        />
      </main>

      <FooterLogoEmphasis
        logoText="Fiasko"
        columns={[
          {
            items: [
              { label: "About Us", href: "about" },
              { label: "Our Flowers", href: "products" },
              { label: "Why Choose Us", href: "features" }
            ]
          },
          {
            items: [
              { label: "Customer Reviews", href: "testimonials" },
              { label: "FAQ", href: "faq" },
              { label: "Care Guide", href: "features" }
            ]
          },
          {
            items: [
              { label: "Contact", href: "contact" },
              { label: "Delivery Info", href: "contact" },
              { label: "Custom Orders", href: "contact" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}