import MeetingsPanel from "./MeetingsPanel";
import ShortCuts from "./ShortCuts";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
import { MeetingStatus } from "../../utils";

export interface SidebarUserObj {
  id: number;
  name: string;
  meetingStatus: MeetingStatus;
}

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.NOT_IN_MEETING },
  //   { id: 1, name: "Matt B.", meetingStatus: MeetingStatus.IN_MEETING },
  //   { id: 2, name: "Taehee C.", meetingStatus: MeetingStatus.IN_MEETING },
  //   { id: 3, name: "Bob A.", meetingStatus: MeetingStatus.NOT_IN_MEETING },
  // ]);

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

export default Home;