import routeFactory from '@/assets/constants/routeFactory';
import images from '@/assets/images/images';
import Breadcrumb from '@/components/layout/breadcrumb';
import { IBreadcrumbItem } from '@/components/layout/breadcrumb/breadcrumb';
import ContentGenerator from '@/components/layout/contentGenerator';
import InnerPageBanner from '@/components/layout/innerPages/banner';
import { ILayoutLocaleParams, IPageParams } from '@/models/layout';
import { getProject } from '@/services/projects';
import { getTranslations } from 'next-intl/server';

interface IParams {
  id: string;
}

export async function generateMetadata({
  params,
}: {
  params: IPageParams<IParams>;
}) {
  const { id: projectId, locale } = await params;
  const t = await getTranslations({ locale });
  const project = await getProject(projectId);

  return {
    title: project.title,
    description: t('page_blog_metadata_description'),
  };
}

export default async function ProjectPage({
  params,
}: {
  params: IPageParams<IParams>;
}) {
  const paramsData = await params;
  const t = await getTranslations({ locale: paramsData.locale });

  const { id: projectId, locale } = await params;
  const routes = routeFactory(t, locale);

  const project = await getProject(projectId);

  const breadcrumbItems = [
    {
      ...routes.projects,
      href: routes.projects.route(),
    },
    { title: project?.title },
  ] as IBreadcrumbItem[];

  return (
    <main className="flex flex-col items-center justify-between">
      <InnerPageBanner
        subtitle={project.title}
        imageSrc={images.projectImg_1.src}
      />
      <div className="container-fluid mx-auto my-12 md:my-24">
        <Breadcrumb items={breadcrumbItems} />
        {project.content && project.content.length ? (
          <ContentGenerator data={project.content} className="mt-10" />
        ) : (
          <></>
        )}
      </div>
    </main>
  );
}
