import React from 'react';
import { ThemeProvider } from '@/components/ui/theme/ThemeProvider';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ShoppingBag } from 'lucide-react';

// Mock product data - replace with actual data fetching
const mockProducts = [
  {
    id: '1',
    name: 'Elegant Rose Bouquet',
    price: '$85',
    imageSrc: 'https://images.unsplash.com/photo-1586866654837-b8cabc5b0af9?w=400&h=400&fit=crop&crop=center',
    imageAlt: 'Beautiful red rose bouquet'
  },
  {
    id: '2',
    name: 'Sunflower Arrangement',
    price: '$65',
    imageSrc: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop&crop=center',
    imageAlt: 'Bright sunflower arrangement'
  },
  {
    id: '3',
    name: 'Mixed Spring Flowers',
    price: '$95',
    imageSrc: 'https://images.unsplash.com/photo-1606384019820-90a5d32e1cdf?w=400&h=400&fit=crop&crop=center',
    imageAlt: 'Colorful spring flower mix'
  },
  {
    id: '4',
    name: 'White Lily Bouquet',
    price: '$75',
    imageSrc: 'https://images.unsplash.com/photo-1582797493277-caab8b23ed20?w=400&h=400&fit=crop&crop=center',
    imageAlt: 'Pure white lily bouquet'
  },
  {
    id: '5',
    name: 'Tropical Paradise',
    price: '$120',
    imageSrc: 'https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=400&fit=crop&crop=center',
    imageAlt: 'Exotic tropical flower arrangement'
  },
  {
    id: '6',
    name: 'Classic Tulip Bundle',
    price: '$55',
    imageSrc: 'https://images.unsplash.com/photo-1586953667419-d3edc5cafaa8?w=400&h=400&fit=crop&crop=center',
    imageAlt: 'Fresh tulip bundle'
  }
];

export default function ShopPage() {
  const handleProductClick = (product: any) => {
    // Handle product click - could navigate to product detail page
    console.log('Product clicked:', product);
  };

  const handleFavorite = (productId: string) => {
    // Handle favorite toggle
    console.log('Favorited product:', productId);
  };

  const handleViewAll = () => {
    // Handle view all products
    console.log('View all products clicked');
  };

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <NavbarStyleApple
        brandName="Baklajan"
        navItems={[
          { name: "Home", id: "/" },
          { name: "About", id: "about" },
          { name: "Services", id: "services" },
          { name: "Gallery", id: "gallery" },
          { name: "Testimonials", id: "testimonials" },
          { name: "Contact", id: "contact" },
          { name: "Shop", id: "/shop" }
        ]}
      />
      
      <main className="min-h-screen">
        <ProductCardOne
          products={mockProducts.map(product => ({
            ...product,
            onProductClick: () => handleProductClick(product),
            onFavorite: () => handleFavorite(product.id),
            isFavorited: false
          }))}
          title="Our Flower Collection"
          description="Discover our carefully curated selection of premium flowers and arrangements for every occasion"
          tag="Shop Now"
          tagIcon={ShoppingBag}
          buttons={[
            {
              text: "View All Products",              onClick: handleViewAll
            }
          ]}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          ariaLabel="Shop products section"
        />
      </main>

      <FooterBase
        logoText="Baklajan"
        copyrightText="© 2025 Baklajan Flowers Studio. All rights reserved."
        columns={[
          {
            title: "Services",            items: [
              { label: "Weddings", href: "services" },
              { label: "Events", href: "services" },
              { label: "Subscriptions", href: "services" },
              { label: "Custom Orders", href: "contact" }
            ]
          },
          {
            title: "Company",            items: [
              { label: "About Us", href: "about" },
              { label: "Gallery", href: "gallery" },
              { label: "Testimonials", href: "testimonials" },
              { label: "Contact", href: "contact" }
            ]
          },
          {
            title: "Support",            items: [
              { label: "FAQ", href: "faq" },
              { label: "Delivery Info", href: "#" },
              { label: "Care Guide", href: "#" },
              { label: "Privacy Policy", href: "#" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}