import { Box, Button, List, Typography } from "@mui/material";
import React from "react";
import { useDispatch } from "react-redux";
import { open } from "../../../../redux/slices/meetingDetailsOpenSlice";

const meetings: { name: string; duration: string }[] = [
  { name: "Kanban Meeting", duration: "10:45 am - 11:45 am" },
  { name: "Design Meeting", duration: "10:45 am - 11:45 am" },
  { name: "Customer Meeting", duration: "10:45 am - 11:45 am" },
  { name: "Some kind of Meeting", duration: "10:45 am - 11:45 am" },
  { name: "Some kind of Meeting", duration: "10:45 am - 11:45 am" },
];

const LowerBody: React.FC = () => {
  const dispatch = useDispatch();

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        border: 1,
        borderRadius: 2,
        width: "70%",
        height: "60%",
        alignSelf: "center",
      }}
    >
      <Typography variant="h4" textAlign="center">
        Upcoming meetings
      </Typography>
      <List sx={{ maxHeight: "100%", overflow: "auto" }}>
        {meetings.map((meeting, i) => (
          <Box
            sx={{
              display: "flex",
              justifyContent: "space-between",
              height: "50px",
              px: "10px",
              borderTop: 1,
              borderBottom: i === meetings.length - 1 ? 1 : 0,
            }}
            key={i}
          >
            <Button
              variant="text"
              color="info"
              onClick={() => dispatch(open())}
            >
              {meeting.name}
            </Button>
            <Typography sx={{ pt: 1.5 }}>{meeting.duration}</Typography>
          </Box>
        ))}
      </List>
    </Box>
  );
};

export default LowerBody;