import { AppBar, Button, IconButton, Toolbar, Typography } from "@mui/material";
import React from "react";
import CloseIcon from "@mui/icons-material/Close";
import { useAppDispatch } from "../../../redux/hooks";
import { close } from "../../../redux/slices/meetingDetailsOpenSlice";
import DetailedMeeting from "../../../api-bodies/DetailedMeeting";

interface Props {
  meeting: DetailedMeeting | null;
}

const Header: React.FC<Props> = (props) => {
  const dispatch = useAppDispatch();

  return (
    <AppBar sx={{ position: "relative" }}>
      <Toolbar>
        <Typography variant="h6" sx={{ flexGrow: 1 }}>
          {props.meeting !== null ? props.meeting.topic : null}
        </Typography>
        <Button variant="contained" color="secondary">
          Join
        </Button>
        <Button variant="contained" color="secondary" sx={{ ml: 1 }}>
          Recording
        </Button>
        <IconButton
          edge="start"
          color="inherit"
          aria-label="close"
          onClick={() => dispatch(close())}
          sx={{ ml: 1 }}
        >
          <CloseIcon />
        </IconButton>
      </Toolbar>
    </AppBar>
  );
};

export default Header;