tsms/src/components/LeaveModal/LeaveModal.tsx

import useIsMobile from "@/app/utils/useIsMobile";
import React from "react";
import FullscreenModal from "../FullscreenModal";
import {
  Box,
  Card,
  CardContent,
  Modal,
  SxProps,
  Typography,
} from "@mui/material";
import { useTranslation } from "react-i18next";
import LeaveCalendar, { Props as LeaveCalendarProps } from "./LeaveCalendar";

const modalSx: SxProps = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: { xs: "calc(100% - 2rem)", sm: "90%" },
  maxHeight: "90%",
  maxWidth: 1400,
};

interface Props extends LeaveCalendarProps {
  open: boolean;
  onClose: () => void;
}

const LeaveModal: React.FC<Props> = ({
  open,
  onClose,
  leaveTypes,
  companyHolidays,
  allProjects,
  leaveRecords,
  timesheetRecords,
  isFullTime,
}) => {
  const { t } = useTranslation("home");
  const isMobile = useIsMobile();

  const title = t("Record leave");
  const content = (
    <LeaveCalendar
      isFullTime={isFullTime}
      leaveTypes={leaveTypes}
      companyHolidays={companyHolidays}
      allProjects={allProjects}
      leaveRecords={leaveRecords}
      timesheetRecords={timesheetRecords}
    />
  );

  return isMobile ? (
    <FullscreenModal open={open} onClose={onClose} closeModal={onClose}>
      <Box display="flex" flexDirection="column" gap={2} height="100%">
        <Typography variant="h6" flex="none" padding={2}>
          {title}
        </Typography>
        <Box paddingInline={2}>{content}</Box>
      </Box>
    </FullscreenModal>
  ) : (
    <Modal open={open} onClose={onClose}>
      <Card sx={modalSx}>
        <CardContent>
          <Typography variant="overline" display="block" marginBlockEnd={1}>
            {title}
          </Typography>
          <Box maxHeight={900} overflow="scroll">
            {content}
          </Box>
        </CardContent>
      </Card>
    </Modal>
  );
};

export default LeaveModal;