import { notFound } from "next/navigation";
import Link from "next/link";
import { ChevronLeft } from "lucide-react";
import Banner from "@/components/banner";
import ProjectDetail from "./project-detail";
import { fetchProjectsImage } from "@/lib/api";

interface PageProps {
  params: { category: string; id: string };
}

export default async function Page({ params }: PageProps) {
  const resp = await fetchProjectsImage();
  console.log(
    `${process.env.NEXT_PUBLIC_API_URL}/api/projects/${params.category}/${params.id}`,
  );
  console.log(params);
  try {
    // Fetch the project data
    const project = await fetch(
      `${process.env.NEXT_PUBLIC_API_URL}/api/projects/${params.category}/${params.id}`,
    );

    if (!project.ok) {
      console.log("is it not ok");
      // notFound();
    }

    const data = await project.json();

    if (!data.data) {
      console.log("is it not project");
      console.log(data);
      // notFound();
    }

    return (
      <>
        <Banner imageSrc={resp.image_url} height={400}>
          <div className="text-center text-white">
            <h1 className="text-4xl font-bold mb-2">{data.name}</h1>
            <p className="text-lg text-white/80">Project Details</p>
          </div>
        </Banner>
        <div className="px-4 md:px-8 py-8">
          <div className="max-w-7xl mx-auto ">
            <div className="mb-8">
              <Link
                href={`/projects/${params.category}`}
                className="inline-flex items-center text-orange-600 hover:text-orange-800 transition-colors"
              >
                <ChevronLeft className="mr-1 h-5 w-5" />
                <span>Back to Category</span>
              </Link>
            </div>

            <ProjectDetail project={data} />
          </div>
        </div>
      </>
    );
  } catch (error) {
    console.error("Error loading project:", error);
    notFound();
  }
  return <div>Project Detail</div>;
}