PostDetail.jsx

import React, { useEffect, useState } from 'react';

// Giả lập lấy postId từ router
const postId = 1;
const API_URL = `https://super-barnacle-g4964vwvq4p5hvj67-3000.app.github.dev/api/posts/${postId}`;

export default function PostDetail() {
  const [post, setPost] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    fetch(API_URL)
      .then(res => {
        if (!res.ok) throw new Error('API unavailable');
        return res.json();
      })
      .then(data => {
        setPost(data);
        setLoading(false);
      })
      .catch(() => {
        setError('Không thể tải dữ liệu');
        setLoading(false);
      });
  }, []);

  if (loading) return <div style={{ textAlign: 'center', marginTop: 40 }}>Loading...</div>;
  if (error) return <div style={{ color: 'red', textAlign: 'center', marginTop: 40 }}>{error}</div>;
  if (!post) return null;

  return (
    <div className="post-detail-page" style={{ background: '#F5F6FA', minHeight: '100vh', fontFamily: 'Inter, Arial, sans-serif' }}>
      <main style={{ maxWidth: 600, margin: '32px auto', padding: '0 16px' }}>
        <div style={{ background: '#fff', borderRadius: 16, boxShadow: '0 2px 8px #e0e0e0', padding: 32, marginBottom: 32 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 16 }}>
            <img src="/vite.svg" alt="avatar" style={{ width: 48, height: 48, borderRadius: '50%' }} />
            <div>
              <div style={{ fontWeight: 600, fontSize: '1.1rem', color: '#222' }}>{post.username}</div>
              <div style={{ color: '#888', fontSize: '0.9rem' }}>{new Date(post.createdAt).toLocaleString()}</div>
            </div>
          </div>
          <div style={{ fontSize: '1.2rem', color: '#333', marginBottom: 24 }}>{post.content}</div>
          <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
            <button style={{ background: '#646cff', color: '#fff', border: 'none', borderRadius: 8, padding: '8px 16px', fontWeight: 500 }}>Like ({post.likes})</button>
            <span style={{ color: '#888' }}>Comments: {post.comments}</span>
          </div>
        </div>
        {/* Hiển thị danh sách comment nếu có */}
        <div style={{ background: '#fff', borderRadius: 16, boxShadow: '0 2px 8px #e0e0e0', padding: 24 }}>
          <h2 style={{ fontWeight: 700, fontSize: '1.2rem', marginBottom: 16 }}>Comments</h2>
          {/* TODO: Render comments từ post.commentsList */}
          <div style={{ color: '#888' }}>No comments yet.</div>
        </div>
      </main>
    </div>
  );
}