"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Facebook, Twitter, Star } from 'lucide-react';

export default function ShopPage() {
  // Sample product data with brand, ratings, and reviews for social proof
  const products = [
    {
      id: "1",      brand: "Mango",      name: "Elegant Summer Dress",      price: "$89.99",      rating: 5,
      reviewCount: "2.1k",      imageSrc: "https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?w=400&h=500&fit=crop",      imageAlt: "Elegant Summer Dress",      isFavorited: false
    },
    {
      id: "2",      brand: "Mango",      name: "Classic Denim Jacket",      price: "$124.99",      rating: 4,
      reviewCount: "1.8k",      imageSrc: "https://images.unsplash.com/photo-1544441893-675973e31985?w=400&h=500&fit=crop",      imageAlt: "Classic Denim Jacket",      isFavorited: false
    },
    {
      id: "3",      brand: "Mango",      name: "Silk Blouse White",      price: "$69.99",      rating: 5,
      reviewCount: "3.2k",      imageSrc: "https://images.unsplash.com/photo-1564257577-4838dae50d5c?w=400&h=500&fit=crop",      imageAlt: "Silk Blouse White",      isFavorited: true
    },
    {
      id: "4",      brand: "Mango",      name: "High-Waist Trousers",      price: "$94.99",      rating: 4,
      reviewCount: "1.5k",      imageSrc: "https://images.unsplash.com/photo-1594633312681-425c7b97ccd1?w=400&h=500&fit=crop",      imageAlt: "High-Waist Trousers",      isFavorited: false
    },
    {
      id: "5",      brand: "Mango",      name: "Leather Ankle Boots",      price: "$149.99",      rating: 5,
      reviewCount: "4.1k",      imageSrc: "https://images.unsplash.com/photo-1543163521-1bf539c55dd2?w=400&h=500&fit=crop",      imageAlt: "Leather Ankle Boots",      isFavorited: false
    },
    {
      id: "6",      brand: "Mango",      name: "Cashmere Sweater",      price: "$159.99",      rating: 5,
      reviewCount: "2.7k",      imageSrc: "https://images.unsplash.com/photo-1434389677669-e08b4cac3105?w=400&h=500&fit=crop",      imageAlt: "Cashmere Sweater",      isFavorited: false
    },
    {
      id: "7",      brand: "Mango",      name: "Statement Earrings",      price: "$34.99",      rating: 4,
      reviewCount: "896",      imageSrc: "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?w=400&h=500&fit=crop",      imageAlt: "Statement Earrings",      isFavorited: true
    },
    {
      id: "8",      brand: "Mango",      name: "Midi Pleated Skirt",      price: "$79.99",      rating: 4,
      reviewCount: "1.3k",      imageSrc: "https://images.unsplash.com/photo-1583496661160-fb5886a13d77?w=400&h=500&fit=crop",      imageAlt: "Midi Pleated Skirt",      isFavorited: false
    }
  ];

  const handleProductClick = (productId: string) => {
    console.log(`Clicked on product: ${productId}`);
  };

  const handleFavorite = (productId: string) => {
    console.log(`Favorited product: ${productId}`);
  };

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="large"
      background="aurora"
      cardStyle="gradient-mesh"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <NavbarStyleCentered
        brandName="Mango"
        navItems={[
          { name: "Home", id: "/" },
          { name: "Shop", id: "products" },
          { name: "About", id: "about" },
          { name: "Collections", id: "collections" },
          { name: "Reviews", id: "testimonials" },
          { name: "Contact", id: "contact" }
        ]}
        button={{
          text: "Shop Now",          href: "products"
        }}
      />

      <main className="min-h-screen py-16">
        <ProductCardTwo
          products={products.map(product => ({
            ...product,
            onProductClick: () => handleProductClick(product.id),
            onFavorite: () => handleFavorite(product.id)
          }))}
          title="Premium Collection"
          description="Discover our curated selection of top-rated fashion pieces, featuring the finest materials and contemporary designs that have earned thousands of customer reviews."
          tag="Best Sellers"
          tagIcon={Star}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "View All Categories",              href: "/collections"
            },
            {
              text: "New Arrivals",              href: "/new-arrivals"
            }
          ]}
        />
      </main>

      <FooterCard
        logoText="Mango"
        copyrightText="© 2025 Mango Clothing Shop. All rights reserved."
        socialLinks={[
          {
            icon: Instagram,
            href: "https://instagram.com/mangofashion",            ariaLabel: "Instagram"
          },
          {
            icon: Facebook,
            href: "https://facebook.com/mangofashion",            ariaLabel: "Facebook"
          },
          {
            icon: Twitter,
            href: "https://twitter.com/mangofashion",            ariaLabel: "Twitter"
          }
        ]}
      />
    </ThemeProvider>
  );
}