import MeetingsPanel from "./MeetingsPanel";
import ShortCuts from "./ShortCuts";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
import { MeetingStatus, SidebarUserObj } from "../sidebar/SidebarUser";
import { useState } from "react";

const Home: React.FC = () => {

  /* Temporary data - this is the same as what's in ProtectedRoute.tsx so it should not
  be duplicated like this in the future (Route components were being weird when I tried
  to pass it down from App.tsx) */
  const [mockUsers] = useState<SidebarUserObj[]>([
    { id: 0, name: "Jincheng L.", meetingStatus: MeetingStatus.ONLINE },
    { id: 1, name: "Matt B.", meetingStatus: MeetingStatus.IN_MEETING },
    { id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.OFFLINE },
    { id: 3, name: "Bob A.", meetingStatus: MeetingStatus.AWAY }
  ]);


  return (
    <Container className="main-home">
      <Grid container>
        <Grid item sm={8}>
          <MeetingsPanel />
        </Grid>
        <Grid item sm={4}>
          <ShortCuts users={mockUsers}/>
        </Grid>
      </Grid>
    </Container>
  );
};

export default Home;