"use client";

import React from 'react';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import ProductCardThree from '@/components/sections/product/ProductCardThree';

const ShopPage = () => {
  // Mock products for the shop
  const products = [
    {
      id: '1',
      name: 'iPhone 16 Pro Max',
      price: '$1,199.00',
      imageSrc: 'https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=500&h=500&fit=crop',
      imageAlt: 'iPhone 16 Pro Max',
      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onFavorite: () => console.log('Favorite toggled')
    },
    {
      id: '2',
      name: 'iPhone 16 Pro',
      price: '$999.00',
      imageSrc: 'https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=500&h=500&fit=crop',
      imageAlt: 'iPhone 16 Pro',
      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onFavorite: () => console.log('Favorite toggled')
    },
    {
      id: '3',
      name: 'iPhone 16',
      price: '$799.00',
      imageSrc: 'https://images.unsplash.com/photo-1574944985070-8f3ebc6b79d2?w=500&h=500&fit=crop',
      imageAlt: 'iPhone 16',
      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onFavorite: () => console.log('Favorite toggled')
    },
    {
      id: '4',
      name: 'iPhone 15 Pro',
      price: '$899.00',
      imageSrc: 'https://images.unsplash.com/photo-1556656793-08538906a9f8?w=500&h=500&fit=crop',
      imageAlt: 'iPhone 15 Pro',
      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onFavorite: () => console.log('Favorite toggled')
    },
    {
      id: '5',
      name: 'AirPods Pro',
      price: '$249.00',
      imageSrc: 'https://images.unsplash.com/photo-1606220588913-b3aacb4d2f46?w=500&h=500&fit=crop',
      imageAlt: 'AirPods Pro',
      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onFavorite: () => console.log('Favorite toggled')
    },
    {
      id: '6',
      name: 'Apple Watch Ultra',
      price: '$799.00',
      imageSrc: 'https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=500&h=500&fit=crop',
      imageAlt: 'Apple Watch Ultra',
      initialQuantity: 1,
      onProductClick: () => console.log('Product clicked'),
      onQuantityChange: (quantity: number) => console.log('Quantity changed:', quantity),
      onFavorite: () => console.log('Favorite toggled')
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <NavbarStyleApple
        brandName="iPhone"
        navItems={[
          { name: "Home", id: "/" },
          { name: "Shop", id: "/shop" }
        ]}
      />
      
      <main className="min-h-screen">
        <ProductCardThree
          products={products}
          title="iPhone Store"
          description="Discover the latest iPhone models and accessories with our easy shopping experience"
          tag="Free Shipping"
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          ariaLabel="iPhone Store Product Section"
          buttons={[
            {
              text: "View All Products",              href: "#products"
            }
          ]}
        />
      </main>

      <FooterMedia
        imageSrc="asset://footer-hero-image"
        imageAlt="iPhone Store Footer"
        logoText="iPhone Store"
        copyrightText="© 2025 iPhone Store. All rights reserved."
        columns={[
          {
            title: "Shop",            items: [
              { label: "All Products", href: "#products" },
              { label: "iPhone 16 Pro", href: "#products" },
              { label: "Accessories", href: "#products" }
            ]
          },
          {
            title: "Support",            items: [
              { label: "Technical Support", href: "https://support.apple.com" },
              { label: "Warranty Info", href: "#" },
              { label: "Contact Us", href: "#contact" }
            ]
          },
          {
            title: "Company",            items: [
              { label: "About Us", href: "#" },
              { label: "Privacy Policy", href: "#" },
              { label: "Terms of Service", href: "#" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
};

export default ShopPage;