"use client";

import React from 'react';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Star } from 'lucide-react';

const ShopPage = () => {
  // Sample product data for fitness equipment
  const products = [
    {
      id: '1',
      brand: 'FitTech',
      name: 'Pro Resistance Bands Set',
      price: '$49.99',
      rating: 5,
      reviewCount: '2.1k',
      imageSrc: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&h=400&fit=crop&crop=center',
      imageAlt: 'Pro Resistance Bands Set',
      isFavorited: false,
      onProductClick: () => console.log('Product clicked'),
      onFavorite: () => console.log('Favorited')
    },
    {
      id: '2',
      brand: 'PowerLift',
      name: 'Adjustable Dumbbell Set',
      price: '$299.99',
      rating: 4,
      reviewCount: '1.8k',
      imageSrc: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&h=400&fit=crop&crop=center',
      imageAlt: 'Adjustable Dumbbell Set',
      isFavorited: false,
      onProductClick: () => console.log('Product clicked'),
      onFavorite: () => console.log('Favorited')
    },
    {
      id: '3',
      brand: 'YogaFlow',
      name: 'Premium Yoga Mat',
      price: '$79.99',
      rating: 5,
      reviewCount: '3.2k',
      imageSrc: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=400&h=400&fit=crop&crop=center',
      imageAlt: 'Premium Yoga Mat',
      isFavorited: false,
      onProductClick: () => console.log('Product clicked'),
      onFavorite: () => console.log('Favorited')
    },
    {
      id: '4',
      brand: 'CardioMax',
      name: 'Smart Jump Rope',
      price: '$89.99',
      rating: 4,
      reviewCount: '1.5k',
      imageSrc: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&h=400&fit=crop&crop=center',
      imageAlt: 'Smart Jump Rope',
      isFavorited: false,
      onProductClick: () => console.log('Product clicked'),
      onFavorite: () => console.log('Favorited')
    },
    {
      id: '5',
      brand: 'FitCore',
      name: 'Stability Ball Pro',
      price: '$39.99',
      rating: 5,
      reviewCount: '2.7k',
      imageSrc: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&h=400&fit=crop&crop=center',
      imageAlt: 'Stability Ball Pro',
      isFavorited: false,
      onProductClick: () => console.log('Product clicked'),
      onFavorite: () => console.log('Favorited')
    },
    {
      id: '6',
      brand: 'StrengthPro',
      name: 'Kettlebell Set',
      price: '$159.99',
      rating: 4,
      reviewCount: '987',
      imageSrc: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&h=400&fit=crop&crop=center',
      imageAlt: 'Kettlebell Set',
      isFavorited: false,
      onProductClick: () => console.log('Product clicked'),
      onFavorite: () => console.log('Favorited')
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <NavbarStyleFullscreen
        navItems={[
          { name: "Home", id: "/" },
          { name: "Shop", id: "/shop" }
        ]}
        brandName="FitForce"
        bottomLeftText="Transform Your Body"
        bottomRightText="contact@fitforce.com"
      />
      
      <main className="min-h-screen">
        <ProductCardTwo
          products={products}
          title="Premium Fitness Equipment"
          description="Discover our curated collection of top-rated fitness equipment from trusted brands"
          tag="Best Sellers"
          tagIcon={Star}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "View All Products",              onClick: () => console.log('View all clicked')
            }
          ]}
        />
      </main>

      <FooterLogoEmphasis
        logoText="FitForce"
        columns={[
          {
            items: [
              { label: "Home", href: "/" },
              { label: "Shop", href: "/shop" }
            ]
          },
          {
            items: [
              { label: "Phone", href: "#" },
              { label: "Email", href: "#" },
              { label: "Address", href: "#" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
};

export default ShopPage;