// 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 Search from "./Search.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 HudWidget(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>
      <Search></Search>
      <InvestorInfo personId={props.selected} isSelected={isSelected} selectedId={props.selected} dates={props.dates}></InvestorInfo>
    </div>
  );
}

export default HubWidget;