import { Suspense } from "react";
import type { Metadata } from "next";
import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { SiteFooter } from "@/components/site-footer";
import {
  RehberMakale,
  RehberMakaleSkeleton,
  rehberStaticSlugs,
  rehberYaziMetadata,
} from "@/features/rehber/components/rehber-makale";

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

export async function generateMetadata({
  params,
}: PageProps<"/rehber/[slug]">): Promise<Metadata> {
  const { slug } = await params;
  return rehberYaziMetadata(slug);
}

export default function RehberYaziPage({
  params,
}: PageProps<"/rehber/[slug]">) {
  return (
    <>
      <main className="mx-auto w-full max-w-3xl px-4 py-12 sm:py-16">
        <nav
          aria-label="breadcrumb"
          className="flex items-center gap-1 text-xs text-slate-500"
        >
          <Link href="/" className="hover:text-primary hover:underline">
            Ana Sayfa
          </Link>
          <ChevronRight className="size-3" aria-hidden />
          <Link href="/rehber" className="hover:text-primary hover:underline">
            Rehber
          </Link>
        </nav>

        <Suspense fallback={<RehberMakaleSkeleton />}>
          {params.then(({ slug }) => (
            <RehberMakale slug={slug} />
          ))}
        </Suspense>
      </main>
      <SiteFooter />
    </>
  );
}
