"use client";

import { Suspense } from "react";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import { useProductCatalog } from "@/hooks/useProductCatalog";

function ShopPageContent() {
  const {
    products,
  } = useProductCatalog();

  return (
    <div className="min-h-screen bg-gray-50 py-12 px-4">
      <div className="max-w-7xl mx-auto">
        <h1 className="text-4xl font-bold text-gray-900 mb-8">Our Shop</h1>
        {products && products.length > 0 ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {products.map((product) => (
              <div key={product.id} className="bg-white rounded-lg shadow-md overflow-hidden">
                {product.imageSrc && (
                  <img
                    src={product.imageSrc}
                    alt={product.name}
                    className="w-full h-48 object-cover"
                  />
                )}
                <div className="p-6">
                  <h2 className="text-xl font-bold text-gray-900 mb-2">{product.name}</h2>
                  <p className="text-lg text-gray-700 font-semibold mb-4">${product.price}</p>
                  <button className="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded hover:bg-blue-700 transition">
                    Add to Cart
                  </button>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-center text-gray-600">No products available.</div>
        )}
      </div>
    </div>
  );
}

export default function ShopPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Blog", id: "/blog" },
    { name: "Shop", id: "/shop" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen navItems={navItems} />
        </div>
        <Suspense fallback={<div className="text-center py-12">Loading shop...</div>}>
          <ShopPageContent />
        </Suspense>
      </ReactLenis>
    </ThemeProvider>
  );
}
