import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import { getQueryClient } from "@repo/core-trpc";
import { blogContainer } from "../../di/container";
import { BLOG_SYMBOLS } from "../../di/symbols";
import type { IGetArticleBySlugController } from "../../interface-adapters/controllers/get-article-by-slug.controller";
import { ArticleDetail as ArticleDetailClient } from "./article-detail.client";

export async function ArticleDetail({ slug }: { slug: string }) {
  const controller = blogContainer.get<IGetArticleBySlugController>(
    BLOG_SYMBOLS.IGetArticleBySlugController,
  );
  const article = await controller({ slug });
  const queryClient = getQueryClient();
  queryClient.setQueryData(
    ["blog", "articleBySlug", { input: { slug } }],
    article,
  );

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <ArticleDetailClient slug={slug} />
    </HydrationBoundary>
  );
}