text: import './annoucement.css';
  import Header from '../../../components/Header/HeaderHome';
  import Carousel from '../../../components/Carousel/Carousel';
  import { useParams } from 'react-router-dom';
  import { useEffect, useState } from 'react';
  import user from '../../../components/images/user.png';
  import { format } from 'timeago.js';
  import axios from 'axios';
  const Annoucement = () => {
    const { id } = useParams();
    const [postdb, setPost] = useState({ post: '' });
    const [dynamicData, setDynamic] = useState([]);
  
    useEffect(() => {
      const fetchData = async () => {
        const { data } = await axios.get(`/posts/UserPost?user=${id}`);
  
        setPost(data);
      };
      fetchData();
    }, [id]);
  
    useEffect(() => {
      const arr = [];
      const { infoPost } = postdb.post;
  
      for (let i in infoPost) {
        if (
          i !== 'coin' &&
          i !== 'price' &&
          i !== 'title' &&
          i !== 'location' &&
          i !== 'email' &&
          i !== 'phone' &&
          i !== 'description' &&
          i !== 'images'
        ) {
          arr.push({ prop: i, value: infoPost[i] });
        }
      }
      setDynamic(arr);
    }, [postdb]);
  
    return (
      <div className="Container-body">
        <Header />
        <div className="container_Mid">
          <header className="topContainer">
            <Carousel img={postdb.post.infoPost?.images} />
            <article className="ProfileCont">
              <h4 className="seller">Seller</h4>
              <img
                src={postdb.profilePicture || user}
                className="profileImage"
                alt=""
              />
              <p className="userName">{postdb.userName}</p>
              <p className="phoneNumber">
                <span className="strongText">PhoneNumber:</span>
                {postdb.post.infoPost?.phone}
              </p>
              <p className="location">
                <span className="strongText">Location:</span>
                {postdb.post.infoPost?.location}
              </p>
              <p className="ratting">
                <span className="strongText">Ratting:</span>
                {postdb.rating === 1
                  ? 'beginner'
                  : postdb.rating === 2
                  ? 'trustworthy'
                  : postdb.ratting === 3
                  ? 'experienced'
                  : postdb.ratting === 0 && 'deceptive'}
              </p>
            </article>
          </header>
          <div className="buttomContainer">
            <p className="time_line">{format(postdb.post.createdAt)}</p>
            <h3 className="title_annoucement">{postdb.post.infoPost?.title}</h3>
            <p className="price_annoucement">
              {postdb.post.infoPost?.price}{' '}
              <span>{postdb.post.infoPost?.coin}</span>
            </p>
            <div className="productProp">
              {dynamicData.length > 0 &&
                dynamicData.map((elem, index) => {
                  return (
                    <div className="productElement" key={index}>
                      <p className="ElementProp">
                        <span className="ElementPropSpan">{elem.prop}</span>:
                        {elem.value === true
                          ? 'Yes'
                          : elem.value === false
                          ? 'Nop'
                          : elem.value}
                      </p>
                    </div>
                  );
                })}
            </div>
            <p className="Description_annoucement">
              Description: <span>{postdb.post.infoPost?.description}</span>
            </p>
          </div>
        </div>
      </div>
    );
  };
  
  export default Annoucement;
  