"use client";

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

export default function ShopPage() {
  // Sample products data for travel shop
  const travelProducts = [
    {
      id: "1",      name: "Adventure Backpack Pro",      price: "$189",      imageSrc: "/images/backpack-adventure.jpg",      imageAlt: "Professional adventure backpack",      onProductClick: () => window.open('/product/adventure-backpack-pro', '_blank')
    },
    {
      id: "2",      name: "Travel Camera Kit",      price: "$449",      imageSrc: "/images/camera-travel.jpg",      imageAlt: "Complete travel camera kit",      onProductClick: () => window.open('/product/travel-camera-kit', '_blank')
    },
    {
      id: "3",      name: "Portable Power Bank",      price: "$79",      imageSrc: "/images/power-bank.jpg",      imageAlt: "High capacity portable power bank",      onProductClick: () => window.open('/product/portable-power-bank', '_blank')
    },
    {
      id: "4",      name: "Travel Organizer Set",      price: "$65",      imageSrc: "/images/organizer-set.jpg",      imageAlt: "Complete travel organizer set",      onProductClick: () => window.open('/product/travel-organizer-set', '_blank')
    },
    {
      id: "5",      name: "Waterproof Dry Bag",      price: "$35",      imageSrc: "/images/dry-bag.jpg",      imageAlt: "Waterproof dry bag for adventures",      onProductClick: () => window.open('/product/waterproof-dry-bag', '_blank')
    },
    {
      id: "6",      name: "Travel Comfort Pillow",      price: "$29",      imageSrc: "/images/travel-pillow.jpg",      imageAlt: "Ergonomic travel comfort pillow",      onProductClick: () => window.open('/product/travel-comfort-pillow', '_blank')
    },
    {
      id: "7",      name: "Multi-Tool Adventure Kit",      price: "$95",      imageSrc: "/images/multi-tool.jpg",      imageAlt: "Professional adventure multi-tool kit",      onProductClick: () => window.open('/product/multi-tool-adventure-kit', '_blank')
    },
    {
      id: "8",      name: "Solar Charger Panel",      price: "$129",      imageSrc: "/images/solar-charger.jpg",      imageAlt: "Portable solar charger panel",      onProductClick: () => window.open('/product/solar-charger-panel', '_blank')
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <NavbarLayoutFloatingInline
        brandName="Wanderlust Travels"
        navItems={[
          { name: "Home", id: "/" },
          { name: "Shop", id: "/shop" }
        ]}
        button={{
          text: "Book Now",          href: "contact"
        }}
      />
      
      <main className="min-h-screen">
        <ProductCardOne
          products={travelProducts}
          title="Travel Essentials"
          description="Discover premium travel gear and accessories to enhance your adventures around the world"
          tag="Shop Collection"
          tagIcon={ShoppingBag}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "View All Products",              href: "/products"
            }
          ]}
        />
      </main>

      <FooterCard
        logoText="Wanderlust Travels"
        copyrightText="© 2024 Wanderlust Travels | Crafting Adventures Worldwide"
        socialLinks={[
          {
            icon: Facebook,
            href: "https://facebook.com/wanderlustravels",            ariaLabel: "Facebook"
          },
          {
            icon: Instagram,
            href: "https://instagram.com/wanderlustravels",            ariaLabel: "Instagram"
          },
          {
            icon: Twitter,
            href: "https://twitter.com/wanderlustravels",            ariaLabel: "Twitter"
          },
          {
            icon: Linkedin,
            href: "https://linkedin.com/company/wanderlustravels",            ariaLabel: "LinkedIn"
          }
        ]}
        ariaLabel="Site footer with links and information"
      />
    </ThemeProvider>
  );
}