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

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

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

  return (
    <ListItemButton 
      onClick={() => dispatch(open(props.meeting))} 
      component="a" 
      className={"row meeting " + props.meetingClass}>
      <Box sx={{ display: "flex", flexDirection: "column" }}>
        <Typography color="white" variant="h5">{props.meetingName}</Typography>
        <Typography color="white" variant="h6">{props.meetingTime.toUpperCase()}</Typography>
        <Typography color="mistyrose" variant="body1">{props.meetingMembers}</Typography>
      </Box>
    </ListItemButton>
  );
}

export default Meeting;