import { useState, useEffect } from 'react';
import StaticPost from "./staticPost";

export interface PostContent {
  id: number,
  title: string,
  content: string,
  userId: number,
  parentId: number,
  createdAt: string,
  author: {
    name: string,
    display_name: string,
    id: number
  },
  replies: any[];
  _count: {
    replies: number;
  };
}

export interface PostProps {
  postId: number;
}

export default function Post({ postId }: PostProps) {
  const [postContent, setPostContent] = useState<PostContent>();
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchPost = async () => {
      try {
        // CHANGED: Fetch from your internal resource route
        // This triggers the 'loader' we created in step 2
        const response = await fetch(`/api/posts/${postId}`);
        
        if (!response.ok) throw new Error("Failed to fetch");

        const jsonContent: Array<PostContent> = await response.json();
        let newPostContent: PostContent = jsonContent[0] as PostContent;

        if (newPostContent) {
          setPostContent(newPostContent);
        }
      } catch (error) {
        console.error("Error fetching post:", error);
      } finally {
        setIsLoading(false);
      }
    };
    fetchPost();
  }, [postId]); // Added postId to dependency array

  if (isLoading) return <div>Loading...</div>;
  if (!postContent) return <p>Failed to load!</p>;

  return <StaticPost postContent={postContent} />;
}