"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { useParams } from "next/navigation";
import React from "react";

export default function ChapterPage() {
  const { id } = useParams();
  
  return (
    <ThemeProvider>
      <main className="min-h-screen p-8 md:p-24">
        <div className="max-w-4xl mx-auto space-y-8">
          <h1 className="text-4xl font-bold">الفصل {id}</h1>
          <section>
            <h2 className="text-2xl font-semibold mb-2">ملخص الفصل</h2>
            <p className="text-lg">هذا هو ملخص الفصل {id}، حيث يتم استعراض الأحداث الرئيسية وتطور القصة.</p>
          </section>
          <section>
            <h2 className="text-2xl font-semibold mb-2">أحداث رئيسية</h2>
            <ul className="list-disc list-inside space-y-2">
              <li>حدث محوري في بداية الفصل.</li>
              <li>تطور في علاقات الشخصيات.</li>
              <li>خاتمة مشوقة للفصل.</li>
            </ul>
          </section>
          <section>
            <h2 className="text-2xl font-semibold mb-2">الشخصيات</h2>
            <p>الشخصيات التي ظهرت في هذا الفصل: [قائمة الشخصيات]</p>
          </section>
        </div>
      </main>
    </ThemeProvider>
  );
}