import { useContext } from 'react';
import User from './user';
import Suggestions from './suggestions';
import LoggedInUserContext from '../../context/logged-in-user';

export default function Sidebar() {
  const {
    user: { docId: firestoreUserDocId = '', userId, following, username, fullName } = {}
  } = useContext(LoggedInUserContext);

  return (
    <div className="hidden md:block p-4">
      <User username={username} fullName={fullName} />
      <Suggestions userId={userId} following={following} firestoreUserDocId={firestoreUserDocId} />
    </div>
  );
}
