"use client";

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import FooterSimple from "@/components/sections/footer/FooterSimple";

export default function CategoriesPage() {
  const [selectedCategory, setSelectedCategory] = useState("All");
  const categories = ["All", "Men's", "Women's", "Accessories"];

  const products = [
    { id: "1", brand: "GreenScape", name: "Garden Toolkit", price: "$49", rating: 5, reviewCount: "12", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/landscaping/img-2.jpg" },
    { id: "2", brand: "GreenScape", name: "Pruning Shears", price: "$29", rating: 4, reviewCount: "8", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/landscaping/img-3.jpg" },
  ];

  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"
    >
      <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            brandName="GreenScape"
            navItems={[
              { name: "Home", id: "/" },
              { name: "Services", id: "/#services" },
              { name: "Categories", id: "/categories" },
              { name: "Contact", id: "/#contact" },
            ]}
            button={{ text: "Call Now", href: "/#contact" }}
          />
      </div>
      <main className="pt-24">
        <div className="flex justify-center gap-4 py-8">
            {categories.map(cat => (
                <button 
                    key={cat} 
                    onClick={() => setSelectedCategory(cat)}
                    className={`px-4 py-2 rounded-full ${selectedCategory === cat ? 'bg-primary text-white' : 'bg-secondary'}`}>
                    {cat}
                </button>
            ))}
        </div>
        <ProductCardTwo 
            title="Product Categories"
            description="Browse our curated selection of gardening essentials."
            products={products}
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
        />
      </main>
      <FooterSimple
            columns={[
              { title: "Company", items: [{ label: "About", href: "/#about" }, { label: "Contact", href: "/#contact" }] }
            ]}
            bottomLeftText="© 2026 GreenScape"
            bottomRightText="All rights reserved."
      />
    </ThemeProvider>
  );
}