import React from 'react';
import { useTranslations } from "next-intl";
import Link from 'next/link';
import type { AppRouterOutput } from '@/server/trpc/types';
import CommentSection from '@/components/shared/comments/comment-section';
import { Button } from '@/components/ui/button';
import { EditorLayout, EditorLayoutContent } from "@/components/layout/editor";
import { Routes } from "@/config/routes";

type Post = NonNullable<AppRouterOutput['posts']['get']>;

export function PostPreview({ post }: { post: Post }) {
  const t = useTranslations();

  return (
    <EditorLayout>
      <EditorLayoutContent>
        <CommentSection postId={post.id} hideTitle />

        <div className='mt-5 justify-end flex gap-2'>
          <Button asChild variant='secondary'>
            <Link href={`/${post.topic}/${post.slug}`}>{t("dashboard.post.actions.view")}</Link>
          </Button>

          <Button asChild variant='outline'>
            <Link href={Routes.DASHBOARD.POST_LIST}>{t("dashboard.post.editor.actions.cancel")}</Link>
          </Button>
        </div>
      </EditorLayoutContent>
    </EditorLayout>
  );
}