import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import DetailedMeeting from "../../api-bodies/DetailedMeeting";
import Grid from "@mui/material/Grid";
import { useAppDispatch } from "../../redux/hooks";
import { open } from "../../redux/slices/meetingDetailsOpenSlice";

interface Props {
  meeting: DetailedMeeting;
  meetingClass: string;
  meetingName: string;
  meetingTime: string;
  meetingMembers: string
}

function Meeting(props: Props) {
  const dispatch = useAppDispatch();

  return (
    <ListItemButton component="a" onClick={() => dispatch(open(props.meeting))} className={"row meeting " + props.meetingClass}>
      <Grid container>
        <Grid item sm={9}>
          <ListItemText primary={props.meetingName} secondary={props.meetingMembers} />
        </Grid>
        <Grid item sm={3}>
          <ListItemText primary={props.meetingTime} />
        </Grid>
      </Grid>
    </ListItemButton>
  );
}

export default Meeting;