import { notFound } from 'next/navigation';
import { DocBlockRenderer } from '@/components/doc-block-renderer';
import { DocsToc } from '@/components/docs-shell';
import { getAllDocSlugs, getDocPage } from '@/lib/docs-pages';

export function generateStaticParams() {
  return getAllDocSlugs().map((slug) => ({ slug }));
}

export default async function DocPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const page = getDocPage(slug);
  if (!page) notFound();

  return (
    <>
      <main className="min-w-0 max-w-3xl prose-docs">
        <div className="mb-10 border-b border-zinc-200 pb-8 dark:border-zinc-800">
          <p className="text-sm font-medium text-zinc-500">Документация</p>
          <h1 className="mt-2 text-4xl font-bold tracking-tight text-zinc-950 dark:text-zinc-50">{page.title}</h1>
          <p className="mt-4 text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">{page.description}</p>
        </div>

        <article className="space-y-12 pb-16">
          {page.sections.map((section) => (
            <section id={section.id} key={section.id} className="scroll-mt-24">
              <h2 className="mb-4 text-2xl font-semibold tracking-tight text-zinc-950 dark:text-zinc-50">{section.title}</h2>
              <div className="space-y-4">
                {section.blocks.map((block, index) => (
                  <DocBlockRenderer key={`${section.id}-${index}`} block={block} />
                ))}
              </div>
            </section>
          ))}
        </article>
      </main>

      <aside className="hidden xl:block">
        <div className="sticky top-20">
          <DocsToc sections={page.sections.map((s) => ({ id: s.id, title: s.title }))} />
        </div>
      </aside>
    </>
  );
}
