"use client";

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

export default function ChapterPage() {
  const params = useParams();
  const chapterId = params.id as string;

  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="large"
        background="grid"
        cardStyle="glass-depth"
        primaryButtonStyle="flat"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarStyleCentered
            navItems={[
                { name: "الرئيسية", id: "/" },
                { name: "الفصول", id: "/chapters/51" }
            ]}
            brandName="مساعدك الإلكتروني"
            />
        </div>

        <div className="container mx-auto py-20 px-6">
            <h1 className="text-4xl font-bold mb-8">الفصل {chapterId}</h1>
            <div className="bg-card p-8 rounded-lg shadow-lg">
                <h2 className="text-2xl font-semibold mb-4">ملخص الفصل</h2>
                <p className="mb-6">هذا هو ملخص الفصل {chapterId} من السلسلة. استكشف الأحداث الرئيسية والشخصيات التي ظهرت هنا.</p>
                
                <h3 className="text-xl font-semibold mb-2">أهم الأحداث</h3>
                <ul className="list-disc list-inside mb-6">
                    <li>حدث مفصلي يؤثر على مسار القصة.</li>
                    <li>تطور في علاقات الشخصيات.</li>
                </ul>

                <h3 className="text-xl font-semibold mb-2">الشخصيات الظاهرة</h3>
                <p>البطل، الشخصية المساعدة، وخصم جديد.</p>
            </div>
        </div>

        <div id="footer" data-section="footer">
            <FooterLogoEmphasis
            columns={[{ items: [{ label: "الرئيسية", href: "/" }] }]}
            logoText="مساعدك الذكي"
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}