import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Twitter, Facebook, Linkedin, ShoppingBag } from 'lucide-react';

export default function ShopPage() {
  // Sample product data
  const products = [
    {
      id: '1',
      name: 'Premium Ethiopian Blend',
      price: '$24.99',
      variant: 'Dark Roast • 5 Flavors',
      imageSrc: '/api/placeholder/400/400',
      imageAlt: 'Premium Ethiopian Coffee Blend',
      isFavorited: false,
      onFavorite: () => console.log('favorited'),
      onProductClick: () => window.open('/product/1', '_blank')
    },
    {
      id: '2',
      name: 'Colombian Single Origin',
      price: '$22.99',
      variant: 'Medium Roast • 3 Sizes',
      imageSrc: '/api/placeholder/400/400',
      imageAlt: 'Colombian Single Origin Coffee',
      isFavorited: true,
      onFavorite: () => console.log('favorited'),
      onProductClick: () => window.open('/product/2', '_blank')
    },
    {
      id: '3',
      name: 'Artisan Coffee Mug',
      price: '$18.50',
      variant: 'Ceramic • 4 Colors',
      imageSrc: '/api/placeholder/400/400',
      imageAlt: 'Artisan Coffee Mug',
      isFavorited: false,
      onFavorite: () => console.log('favorited'),
      onProductClick: () => window.open('/product/3', '_blank')
    },
    {
      id: '4',
      name: 'French Press Deluxe',
      price: '$45.00',
      variant: 'Stainless Steel • 2 Sizes',
      imageSrc: '/api/placeholder/400/400',
      imageAlt: 'French Press Coffee Maker',
      isFavorited: false,
      onFavorite: () => console.log('favorited'),
      onProductClick: () => window.open('/product/4', '_blank')
    },
    {
      id: '5',
      name: 'Espresso Roast Blend',
      price: '$26.99',
      variant: 'Extra Dark • 6 Varieties',
      imageSrc: '/api/placeholder/400/400',
      imageAlt: 'Espresso Roast Coffee Blend',
      isFavorited: false,
      onFavorite: () => console.log('favorited'),
      onProductClick: () => window.open('/product/5', '_blank')
    },
    {
      id: '6',
      name: 'Coffee Bean Grinder',
      price: '$89.99',
      variant: 'Electric • 3 Settings',
      imageSrc: '/api/placeholder/400/400',
      imageAlt: 'Electric Coffee Bean Grinder',
      isFavorited: true,
      onFavorite: () => console.log('favorited'),
      onProductClick: () => window.open('/product/6', '_blank')
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeMediumTitles"
      background="floatingGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <NavbarStyleApple
        brandName="Drink with Us"
        navItems={[
          { name: "Home", id: "/" },
          { name: "About", id: "about" },
          { name: "Menu", id: "products" },
          { name: "Team", id: "team" },
          { name: "Contact", id: "contact" },
          { name: "Shop", id: "/shop" }
        ]}
      />
      
      <main className="min-h-screen">
        <ProductCardFour
          products={products}
          title="Coffee Shop Collection"
          description="Discover our premium selection of coffee beans, brewing equipment, and accessories. Each product is carefully curated for the perfect coffee experience."
          tag="Premium Quality"
          tagIcon={ShoppingBag}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "View All Products",              onClick: () => console.log('View all products')
            },
            {
              text: "Filter & Sort",              onClick: () => console.log('Filter and sort')
            }
          ]}
        />
      </main>
      
      <FooterCard
        logoText="Drink with Us"
        copyrightText="© 2025 Drink with Us Coffee. All rights reserved."
        socialLinks={[
          {
            icon: Instagram,
            href: "https://instagram.com/drinkwithus",            ariaLabel: "Instagram"
          },
          {
            icon: Twitter,
            href: "https://twitter.com/drinkwithus",            ariaLabel: "Twitter"
          },
          {
            icon: Facebook,
            href: "https://facebook.com/drinkwithus",            ariaLabel: "Facebook"
          },
          {
            icon: Linkedin,
            href: "https://linkedin.com/company/drinkwithus",            ariaLabel: "LinkedIn"
          }
        ]}
      />
    </ThemeProvider>
  );
}