"use client";

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

export default function CartPage() {
  const [cartItems] = useState([]);

  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"
    >
      <NavbarStyleFullscreen
        brandName="GreenScape"
        navItems={[
          { name: "Home", id: "/" },
          { name: "Services", id: "/#services" },
          { name: "Cart", id: "/cart" },
        ]}
      />
      <main className="container mx-auto px-6 py-20 min-h-[60vh]">
        <h1 className="text-4xl font-bold mb-10">Your Shopping Cart</h1>
        {cartItems.length === 0 ? (
          <div className="text-center py-20">
            <p className="text-lg opacity-60">Your cart is currently empty.</p>
            <a href="/" className="inline-block mt-6 px-6 py-3 bg-primary text-white rounded-lg">Continue Shopping</a>
          </div>
        ) : (
          <div>Cart Items Placeholder</div>
        )}
      </main>
      <FooterSimple
        columns={[]}
        bottomLeftText="© 2026 GreenScape"
        bottomRightText="All rights reserved."
      />
    </ThemeProvider>
  );
}