PostDetailsPage.jsx

import { useState, useEffect } from 'react';
import PostDetail from './PostDetail';
import CommentItem from './CommentItem';
import CommentInput from './CommentInput';
import { apiService } from '../services/api';

const PostDetailsPage = ({ postId }) => {
  const [post, setPost] = useState(null);
  const [comments, setComments] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [refreshKey, setRefreshKey] = useState(0);

  useEffect(() => {
    const fetchPostAndComments = async () => {
      try {
        setLoading(true);
        setError(null);
        
        const [postData, commentsData] = await Promise.all([
          apiService.getPostById(postId),
          apiService.getCommentsByPostId(postId)
        ]);
        
        setPost(postData);
        setComments(commentsData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    if (postId) {
      fetchPostAndComments();
    }
  }, [postId, refreshKey]);

  const handleLike = async (postId) => {
    try {
      const username = prompt('Enter your username to like this post:');
      if (!username) return;

      await apiService.likePost(postId, { username });
      setRefreshKey(prev => prev + 1);
    } catch (err) {
      setError(err.message);
    }
  };

  const handleAddComment = async (content) => {
    try {
      const username = prompt('Enter your username:');
      if (!username) return;

      await apiService.createComment(postId, { username, content });
      setRefreshKey(prev => prev + 1);
    } catch (err) {
      setError(err.message);
    }
  };

  if (loading) {
    return (
      <div className="w-[760px] h-[832px] bg-[#E5A000] rounded-[20px] flex items-center justify-center">
        <div className="text-[24px] text-white">Loading post details...</div>
      </div>
    );
  }

  if (error || !post) {
    return (
      <div className="w-[760px] h-[832px] bg-[#E5A000] rounded-[20px] flex items-center justify-center">
        <div className="text-[24px] text-white">Error loading post: {error}</div>
      </div>
    );
  }

  return (
    <div className="w-[760px] h-[832px] bg-[#E5A000] rounded-[20px] overflow-y-auto">
      <PostDetail post={post} onLike={handleLike} />
      <div className="w-full h-[2px] bg-white"></div>
      
      <div className="comments-section">
        {comments.map((comment) => (
          <CommentItem key={comment.id} comment={comment} />
        ))}
      </div>
      
      <CommentInput onSubmit={handleAddComment} />
    </div>
  );
};

export default PostDetailsPage;