Octopus-React-Wp/frontend/src/components/PostDetails.jsx

import React, { useState, useEffect } from "react";
import { Box, Typography, Button, CircularProgress } from "@mui/material";
import { useParams, useNavigate } from "react-router-dom";
import api from "../api";

const PostDetails = () => {
  const { id } = useParams();
  const [post, setPost] = useState(null);
  const [image, setImage] = useState(null);
  const navigate = useNavigate();

  useEffect(() => {
    const fetchPost = async () => {
      try {
        const response = await api.get(`wp/v2/posts/${id}?_fields=title,content,featured_media,date`);
        setPost(response.data);

        // Récupération de l'image
        if (response.data.featured_media) {
          const mediaResponse = await api.get(`wp/v2/media/${response.data.featured_media}`);
          setImage(mediaResponse.data.source_url);
        }
      } catch (error) {
        console.error("Erreur lors de la récupération de l'article :", error);
      }
    };

    fetchPost();
  }, [id]);

  if (!post) {
    return <CircularProgress sx={{ display: "block", margin: "auto", mt: 5 }} />;
  }

  return (
    <Box sx={{ padding: "40px 20px",display:"flex", flexDirection:"column" }}>
      <Button onClick={() => navigate(-1)} variant="outlined" sx={{ mt:5, mb: 3, maxWidth:"200px" }}>
        ⬅ Retour
      </Button>

      <Typography variant="h1" sx={{ 
        fontWeight: "bold", 
        textAlign: "center", 
        mb: 4,
        fontSize: { xs: '3rem', md: '3rem', lg: '3rem' }, // Responsive 
        }}>
        {post.title.rendered}
      </Typography>

      <Box sx={{ display:"flex", alignItems:"center", justifyContent:"center", padding: "40px 20px",margin:"auto" }}>
      {image && (
        <Box
          component="img"
          src={image}
          alt={post.title.rendered}
          sx={{ width: "33%", maxHeight: "400px", objectFit: "cover", borderRadius: "8px", mb: 3 }}
        />
      )}


      <Typography variant="body1" sx={{ maxWidth: "800px", mx: "auto" }} dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
      </Box>
    </Box>
  );
};

export default PostDetails;