import { Metadata } from "next";
import { Suspense } from "react";
import ProjectDetailClient from "./ProjectDetailClient";
import PageLoader from "@/components/ui/PageLoader";
import { generatePageMetadata } from "@/utils/generatePageMetadata";

type ProjectDetailPageProps = {
  params: Promise<{ id: string; title: string }>;
};

export async function generateMetadata({
  params,
}: ProjectDetailPageProps): Promise<Metadata> {
  const { id, title } = await params;
  const decodedTitle = decodeURIComponent(title || "پروژه");

  return generatePageMetadata({
    title: `${decodedTitle} | پروژه‌های مدستاگرام`,
    description: `جزئیات پروژه «${decodedTitle}» در مدستاگرام. مشاهده شرایط همکاری، بودجه و ثبت پیشنهاد.`,
    path: `/projects/${id}/${encodeURIComponent(decodedTitle)}`,
  });
}

export default async function ProjectDetailPage({
  params,
}: ProjectDetailPageProps) {
  const { id } = await params;

  return (
    <Suspense fallback={<PageLoader className="min-h-[50vh]" />}>
      <ProjectDetailClient id={id} />
    </Suspense>
  );
}
