"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function MenusPage() {
  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">
      <NavbarStyleCentered 
        brandName="Kuro Gyu" 
        navItems={[{ name: "Restaurant", id: "/restaurant" }, { name: "Menus", id: "/menus" }, { name: "Sake Bar", id: "/sake-bar" }, { name: "Contact", id: "contact" }]} 
        button={{ text: "Reserve", href: "/contact" }}
      />
      <ProductCardTwo
        title="Our Menus"
        description="An editorial look at our seasonal offerings."
        gridVariant="three-columns-all-equal-width"
        animationType="slide-up"
        products={[{ id: "m1", brand: "Wagyu", name: "Tasting Course", price: "$250", rating: 5, reviewCount: "100+", imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-rare-steak-wooden-board_181624-59117.jpg" }]}
        textboxLayout="default"
        useInvertedBackground={false}
      />
      <FooterBase 
        logoText="Kuro Gyu" 
        columns={[{ title: "Dining", items: [{ label: "Restaurant", href: "/restaurant" }, { label: "Menus", href: "/menus" }, { label: "Sake Bar", href: "/sake-bar" }] }]}
      />
    </ThemeProvider>
  );
}