kovakyazilim/app/(site)/blog/[slug]/page.tsx

import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { ArrowLeft, Calendar } from "lucide-react";
import { renderContent } from "@/lib/content-render";
import { getPostBySlug } from "@/lib/data";
import { buildMetadata } from "@/lib/seo";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPostBySlug(slug);
  if (!post) return { title: "Yazı bulunamadı" };
  return buildMetadata(`/blog/${slug}`, {
    title: post.seo_title || post.title,
    description: post.seo_description || post.excerpt || undefined,
    openGraph: {
      title: post.seo_title || post.title,
      description: post.seo_description || post.excerpt || undefined,
      images: post.seo_image || post.cover_image ? [{ url: (post.seo_image || post.cover_image) as string }] : undefined,
      type: "article",
    },
  });
}

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPostBySlug(slug);
  if (!post || post.status !== "published") notFound();

  const html = renderContent(post.content);

  return (
    <article className="mx-auto max-w-3xl px-6 py-20">
      <Link
        href="/blog"
        className="inline-flex items-center gap-1 text-sm text-[var(--muted)] hover:text-[var(--navy)]"
      >
        <ArrowLeft className="size-3.5" /> Tüm yazılar
      </Link>

      <header className="mt-6 border-b border-[var(--border)] pb-8">
        {post.tags && post.tags.length > 0 && (
          <div className="flex flex-wrap gap-2">
            {post.tags.map((t) => (
              <span
                key={t}
                className="rounded-full bg-[var(--sky-50)] px-2.5 py-1 text-xs text-[var(--sky-600)]"
              >
                {t}
              </span>
            ))}
          </div>
        )}
        <h1 className="mt-4 text-3xl font-bold leading-tight tracking-tight text-[var(--navy)] sm:text-4xl">
          {post.title}
        </h1>
        {post.excerpt && (
          <p className="mt-4 text-lg leading-relaxed text-[var(--muted)]">
            {post.excerpt}
          </p>
        )}
        <div className="mt-6 flex items-center gap-3 text-xs text-[var(--muted)]">
          {post.author && <span>{post.author}</span>}
          {post.author && post.published_at && <span>•</span>}
          {post.published_at && (
            <span className="inline-flex items-center gap-1">
              <Calendar className="size-3" />
              {new Date(post.published_at).toLocaleDateString("tr-TR")}
            </span>
          )}
        </div>
      </header>

      {post.cover_image && (
        <div className="relative mt-8 aspect-video overflow-hidden rounded-2xl">
          <Image
            src={post.cover_image}
            alt={post.title}
            fill
            sizes="(min-width: 1024px) 768px, 100vw"
            className="object-cover"
            priority
          />
        </div>
      )}

      <div
        className="prose prose-lg mt-10 max-w-none text-[var(--foreground)]"
        dangerouslySetInnerHTML={{ __html: html }}
      />
    </article>
  );
}