import { notFound } from "next/navigation";
import type { Metadata } from "next";
import Link from "next/link";
import StaticPageLayout from "@/components/layout/StaticPageLayout";
import { guides, getGuideBySlug } from "@/data/guides";
import { getCategoryBySlug } from "@/data/categories";

interface PageProps {
  params: Promise<{ slug: string }>;
}

export async function generateStaticParams() {
  return guides.map((g) => ({ slug: g.slug }));
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const guide = getGuideBySlug(slug);
  if (!guide) return { title: "Bulunamadı" };
  return {
    title: `${guide.title} | yakınımda.tr`,
    description: guide.description,
  };
}

export default async function RehberDetailPage({ params }: PageProps) {
  const { slug } = await params;
  const guide = getGuideBySlug(slug);
  if (!guide) notFound();

  const category = getCategoryBySlug(guide.categorySlug);

  return (
    <StaticPageLayout
      badge={`${guide.readTime} okuma`}
      title={guide.title}
      subtitle={guide.description}
      breadcrumbs={[
        { label: "Rehber", href: "/rehber" },
        { label: guide.title },
      ]}
    >
      <div className="prose-content">
        {guide.content.map((paragraph, i) => (
          <p key={i}>{paragraph}</p>
        ))}
      </div>

      {category && (
        <div className="mt-10 content-card flex flex-wrap items-center justify-between gap-4">
          <div>
            <p className="text-sm text-slate-500">Hemen ara</p>
            <p className="font-bold text-white">{category.searchTitle}</p>
          </div>
          <Link
            href={`/${category.slug}`}
            className="rounded-xl bg-gradient-to-r from-emerald-500 to-emerald-600 px-6 py-3 text-sm font-bold text-white"
          >
            Sonuçları Gör →
          </Link>
        </div>
      )}
    </StaticPageLayout>
  );
}