// React and component imports
import { useEffect, useState } from "react";
import Hub from "./Hub.js";
import InvestorInfo from "./InvestorInfo.js";

// CSS import
import '../css/UserCheckin.css';
import HubList from "./HubList.js";
import HubSearch from "./HubSearch.js";

/**
 * Component that build the checkin list and displays checkin info.
 * @returns {import('react').HtmlHTMLAttributes} A div with the hubs 
 * in a vertical layout.
 */
function HubWidget(props) {
  return (
    <>
      <div className="User-checkin">
        <div className="Checkins">
          <h2>Suspicion Ranks</h2>
          <HubList setHasLoaded={props.setHasLoaded} data={props.data} setSelected={props.setSelected} selected={props.selected} dates={props.dates}></HubList>
        </div>
        <HubSearch data={props.data}></HubSearch>
      </div>
      <InvestorInfo
        personId={props.selected}
        selectedId={props.selectedId}
        dates={props.dates}
      ></InvestorInfo>
    </>
  );
}

export default HubWidget;