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 } from '@/models/layout';
import { getPost } from '@/services/blog';
import { getTranslations } from 'next-intl/server';

interface IPageParams extends ILayoutLocaleParams {
  id: string;
}

export default async function PostPage({ params }: { params: IPageParams }) {
  const paramsData = await params;
  const t = await getTranslations({ locale: paramsData.locale });

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

  const postData = await getPost(postId);

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

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