import React, {useEffect, useState} from "react";
import "../css/Article.css"

import {Routes, Route, Link, useNavigate, Navigate  } from 'react-router-dom';
import { useParams } from 'react-router-dom';

function Article({data}) {
  const [
    _id, title, content, images, author,
    keyword, latitude, longitude,
    comments, likes, createdAt] = data;

  const navigate = useNavigate();
  function MoveTo(link){
    navigate(link)
  }	
  let listItem = []
  listItem = images.map((el)=>{
    // http://localhost:8080/uploads/21701487062905.png
    return(
      <img
        src={`http://localhost:8080/${el.replaceAll("\\", "/").substring(7)}`}
        alt={`http://localhost:8080/${el.replaceAll("\\", "/").substring(7)}`}
        style={{ width: "100px", height: "100px"}}/>
    )});
    
  return (
    <div class="article" onClick={()=>{console.log(_id); MoveTo(`/post/${_id}`)}}>
      <h1>{title}</h1>
      <h2>{keyword}</h2>
      <h3>{author.nickname} {createdAt}</h3>
      <p>{content}</p>
      <p>{listItem}</p>
      <p>댓글: {comments.length} // 조와요: {likes.length}</p>
    </div>
  );
}

export default Article;