"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';

export default function ProductDetailPage() {
  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 navItems={[{name: "Home", id: "/"}, {name: "Winkelwagen", id: "/cart"}]} brandName="Frituur Op Den Hoek" />
      <ProductCardFour
        title="Onze Producten"
        description="Onze heerlijke selectie"
        gridVariant="uniform-all-items-equal"
        animationType="slide-up"
        textboxLayout="default"
        useInvertedBackground={false}
        products={[
          { id: "1", name: "Frietjes", price: "3.00€", variant: "Regular", imageSrc: "" },
          { id: "2", name: "Frikandel", price: "2.00€", variant: "Regular", imageSrc: "" },
          { id: "3", name: "Kroket", price: "1.50€", variant: "Regular", imageSrc: "" }
        ]}
      />
    </ThemeProvider>
  );
}