"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { useParams } from 'next/navigation';

export default function CourseDetailPage() {
  const params = useParams();

  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="largeSmallSizeLargeTitles"
        background="blurBottom"
        cardStyle="layered-gradient"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            brandName="GourmetAgency"
            navItems={[
              { name: "Home", id: "/" },
              { name: "Courses", id: "/courses" },
              { name: "About", id: "/#about" },
              { name: "Contact", id: "/#contact" }
            ]}
          />
        </div>

        <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
          <h1 className="text-5xl font-bold mb-6">Course Details for {params.id}</h1>
          <p className="text-xl mb-8">Deep dive into professional hospitality strategies and expert culinary techniques.</p>
          <div className="bg-gray-100 p-8 rounded-lg mb-8">
            <h2 className="text-2xl font-semibold mb-4">Instructor: Chef Marco Rossi</h2>
            <p>With over 20 years of experience in Michelin-starred establishments, Chef Rossi brings industry-leading expertise to every lesson.</p>
          </div>
          <button className="bg-blue-600 text-white px-8 py-3 rounded-full text-lg font-medium hover:bg-blue-700 transition">
            Enroll Now
          </button>
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            logoText="GourmetAgency"
            columns={[
              { items: [{ label: "Home", href: "/" }, { label: "Courses", href: "/courses" }] },
              { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}