"use client";

import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCart from '@/components/ecommerce/cart/ProductCart';

export default function CartPage() {
  const [isOpen, setIsOpen] = useState(true);
  const [items, setItems] = useState([{ id: "1", name: "Frietjes", price: "3.00€", quantity: 1, imageSrc: "" }]);

  return (
    <ThemeProvider>
      <NavbarStyleFullscreen navItems={[{name: "Home", id: "/"}, {name: "Producten", id: "/products"}]} brandName="Frituur Op Den Hoek" />
      <div className="pt-32 px-4">
        <ProductCart 
          isOpen={isOpen} 
          onClose={() => setIsOpen(false)} 
          items={items} 
          total="3.00€"
          onRemove={(id) => setItems(items.filter(i => i.id !== id))}
        />
      </div>
    </ThemeProvider>
  );
}