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("blog").map((p) => ({ slug: p.slug }));
}

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

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

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

      <article>
        <header style={{ marginBottom: "2rem" }}>
          <h1 style={{ fontSize: "1.5rem", fontWeight: 800, color: "var(--text)", marginBottom: "0.5rem", lineHeight: 1.3 }}>
            {post.title}
          </h1>
          <div style={{ display: "flex", alignItems: "center", gap: "1rem", flexWrap: "wrap" }}>
            <span style={{ fontSize: "0.75rem", color: "var(--text-muted)" }}>
              {new Date(post.date).toLocaleDateString("tr-TR", { year: "numeric", month: "long", day: "numeric" })}
            </span>
            <div style={{ display: "flex", gap: "0.3rem", flexWrap: "wrap" }}>
              {post.tags.map((t) => <span key={t} className="tag">{t}</span>)}
            </div>
          </div>
        </header>

        <div className="card prose" dangerouslySetInnerHTML={{ __html: post.content || "" }} />
      </article>
    </div>
  );
}