"use client";

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

export default function ShopPage() {
  const petProducts = [
    {
      id: "1",      name: "Premium Dog Food Bowl Set",      price: "$29.99",      imageSrc: "/api/placeholder/400/300",      imageAlt: "Stainless steel dog bowl set",      initialQuantity: 1,
      onProductClick: () => {},
      onQuantityChange: (qty: number) => console.log('Quantity changed:', qty),
      onFavorite: () => {},
      isFavorited: false
    },
    {
      id: "2",      name: "Interactive Cat Toy Bundle",      price: "$24.50",      imageSrc: "/api/placeholder/400/300",      imageAlt: "Interactive cat toys",      initialQuantity: 1,
      onProductClick: () => {},
      onQuantityChange: (qty: number) => console.log('Quantity changed:', qty),
      onFavorite: () => {},
      isFavorited: false
    },
    {
      id: "3",      name: "Cozy Pet Blanket",      price: "$19.99",      imageSrc: "/api/placeholder/400/300",      imageAlt: "Soft pet blanket",      initialQuantity: 1,
      onProductClick: () => {},
      onQuantityChange: (qty: number) => console.log('Quantity changed:', qty),
      onFavorite: () => {},
      isFavorited: false
    },
    {
      id: "4",      name: "Adjustable Pet Collar",      price: "$15.99",      imageSrc: "/api/placeholder/400/300",      imageAlt: "Adjustable dog collar",      initialQuantity: 1,
      onProductClick: () => {},
      onQuantityChange: (qty: number) => console.log('Quantity changed:', qty),
      onFavorite: () => {},
      isFavorited: false
    },
    {
      id: "5",      name: "Pet Grooming Kit",      price: "$39.99",      imageSrc: "/api/placeholder/400/300",      imageAlt: "Complete pet grooming kit",      initialQuantity: 1,
      onProductClick: () => {},
      onQuantityChange: (qty: number) => console.log('Quantity changed:', qty),
      onFavorite: () => {},
      isFavorited: false
    },
    {
      id: "6",      name: "Deluxe Pet Carrier",      price: "$89.99",      imageSrc: "/api/placeholder/400/300",      imageAlt: "Travel pet carrier",      initialQuantity: 1,
      onProductClick: () => {},
      onQuantityChange: (qty: number) => console.log('Quantity changed:', qty),
      onFavorite: () => {},
      isFavorited: false
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="inset"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <NavbarLayoutFloatingOverlay
        brandName="Paws Haven"
        navItems={[
          { name: "Home", id: "/" },
          { name: "Shop", id: "/shop" }
        ]}
        button={{
          text: "Start Adoption",          href: "featured-pets"
        }}
      />
      
      <div id="product-section" data-section="product-section">
        <ProductCardThree
          products={petProducts}
          title="Pet Care Essentials"
          description="Everything your furry friends need for a happy, healthy life. Add items to your cart and help support our shelter animals."
          tag="Shop & Support"
          tagIcon={ShoppingCart}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "View All Products",              onClick: () => {}
            },
            {
              text: "Support Our Mission",              href: "/"
            }
          ]}
        />
      </div>

      <FooterMedia
        imageSrc="asset://footer-shelter-building"
        imageAlt="Paws Haven shelter facility"
        logoText="Paws Haven"
        copyrightText="© 2025 Paws Haven Animal Shelter | All animals deserve loving homes"
        columns={[
          {
            title: "Adopt",            items: [
              { label: "Available Pets", href: "featured-pets" },
              { label: "Adoption Process", href: "adoption-process" },
              { label: "Success Stories", href: "testimonials" }
            ]
          },
          {
            title: "Support",            items: [
              { label: "Donate", href: "#" },
              { label: "Volunteer", href: "#" },
              { label: "Sponsor a Pet", href: "#" }
            ]
          },
          {
            title: "About",            items: [
              { label: "Our Story", href: "about" },
              { label: "Contact Us", href: "contact" },
              { label: "Careers", href: "#" }
            ]
          }
        ]}
        onPrivacyClick={null}
        ariaLabel="Paws Haven footer"
      />
    </ThemeProvider>
  );
}