import ProjectHeader from "@components/project/ProjectHeader";
import ProjectImages from "@components/project/ProjectImages";
import ProjectOtherProjects from "@components/project/ProjectOtherProjects";
import ProjectVideos from "@components/project/ProjectVideos";
import { ProjectBySlug, OtherProjects } from "@lib/data";
import type { Metadata } from "next";

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const pageTitle = params.slug.split("-").join(" ");

  return {
    title: pageTitle,
    description: pageTitle,
    keywords: pageTitle,
  };
}

const Project = async ({ params }: { params: { slug: string } }) => {
  const project = await ProjectBySlug(params.slug);
  const title = project.data.title;
  const image = project.data.image;
  const imageDescription = project.data.imageDescription;
  const color = project.data.color;
  const categorySlug = project.data.categorySlug;
  const description = project.data.description;
  const gallery = project.data.gallery;
  const videos = project.data.videos;

  const categoryTitle = categorySlug.split("-").join(" ");

  const otherProjects = await OtherProjects(categorySlug, params.slug);

  return (
    <>
      <ProjectHeader
        title={title}
        image={image}
        imageDescription={imageDescription}
        color={color}
        description={description}
        categoryTitle={categoryTitle}
      />
      {gallery.length > 0 && <ProjectImages gallery={gallery} title={title} />}
      {videos.length > 0 && <ProjectVideos videos={videos} title={title} />}
      {otherProjects.status !== "error" && (
        <ProjectOtherProjects projects={otherProjects} />
      )}
    </>
  );
};

export default Project;