import '../css/UserCheckin.css';
import { useEffect, useState } from "react";

/**
 * Componenet for checkins. Has a toggle to show more info.
 * @param {Object} props The props of the component.
 * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info.
 */
function EdgeInfo(props) {
   /* // State - toggled
    const [stockList, setStockList] = useState([]);

   const stockInfo = stockList.map((stock) =>
        <li>{stock}</li>
    );


    const getEdgeInfo = (fromID, toID) => {
     fetch("http://localhost:4567/edge-data", {
       method: "POST",
       body: JSON.stringify({
         followerID: fromID,
         leaderID:  toID,
       }),
       headers: {
         "Content-Type": "application/json",
       },
       credentials: "same-origin"
     })
         .then(res  => res.json())
         .then(data => {
           console.log(data);
           setStockList(data);
         })
         .catch(err => console.log(err));
   }

    useEffect(() => getEdgeInfo(), [props.selectedFollowerID, props.selectedLeaderID]);
    */


    return (
        <div>

        </div>
        /*<div className='Chosen-user' hidden={!props.showEdgeInfo}>
            <h3>
                <span onClick={() => props.setShowEdgeInfo(false)}>
                    <img className="Img-btn" src="assets/round_arrow_back_white_18dp.png" alt="image" />
                </span>
            </h3>
            <div className = 'edge-info'>
                {stockInfo}
            </div>
        </div>*/);
}

export default EdgeInfo;