import type { Metadata } from "next";
import Link from "next/link";
import { getPost, getPosts } from "@/lib/posts";
import { notFound } from "next/navigation";

export async function generateStaticParams() {
  return getPosts("notebook").map((p) => ({ slug: p.slug }));
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost("notebook", slug);
  if (!post) return {};
  return { title: post.title, description: post.excerpt };
}

export default async function NotebookPostPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const post = await getPost("notebook", slug);
  if (!post) notFound();

  return (
    <div style={{ maxWidth: "100%" }}>
      <Link href="/notebook" style={{ fontSize: "0.78rem", color: "var(--text-muted)", display: "flex", alignItems: "center", gap: "0.3rem", marginBottom: "1.5rem" }}>
        ← Notebook&apos;a Dön
      </Link>

      <article>
        <header style={{ marginBottom: "1.5rem" }}>
          <h1 style={{ fontSize: "1.3rem", fontWeight: 700, color: "var(--text)", marginBottom: "0.4rem" }}>
            {post.title}
          </h1>
          <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", flexWrap: "wrap" }}>
            <span style={{ fontSize: "0.73rem", color: "var(--text-muted)" }}>
              {new Date(post.date).toLocaleDateString("tr-TR", { year: "numeric", month: "long", day: "numeric" })}
            </span>
            {post.tags.map((t) => <span key={t} className="tag">{t}</span>)}
          </div>
        </header>
        <div className="card prose" style={{ borderLeft: "3px solid var(--accent)" }} dangerouslySetInnerHTML={{ __html: post.content || "" }} />
      </article>
    </div>
  );
}
