import { Dialog, DialogTitle, DialogContent, Stack, Typography, IconButton } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { ReactElement } from 'react';
import Iconify from './Iconify';

// ----------------------------------------------------------------------

type MuiDialogProps = {
  title?: {
    name?: string;
    icon?: string;
  };
  openDialog: boolean;
  setOpenDialog: Function;
  content?: ReactElement;
  maxWidth?: string;
};

// ----------------------------------------------------------------------

const MuiDialog = ({ title, openDialog, setOpenDialog, content, maxWidth }: MuiDialogProps) => {
  const handleClose = () => {
    setOpenDialog(false);
  };

  let maxWidthDialog = 'md';

  if (maxWidth) {
    maxWidthDialog = maxWidth;
  }

  return (
    <Dialog open={openDialog} onClose={handleClose} fullWidth={true} maxWidth={maxWidthDialog}>
      <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
        <Stack direction="row" alignItems="center" justifyContent="space-between">
          {title?.icon ? (
            <Stack direction="row">
              <Iconify icon={title?.icon} width={25} height={25} sx={{ marginRight: '10px' }} />
              <Typography variant="h6">{title?.name}</Typography>
            </Stack>
          ) : (
            <Typography variant="h6">{title?.name ? title?.name : ''}</Typography>
          )}
          <IconButton sx={{ color: '#FFF' }} onClick={handleClose}>
            <CloseIcon />
          </IconButton>
        </Stack>
      </DialogTitle>
      <DialogContent sx={{ backgroundColor: '#F9FAFB' }}>
        {content ? content : 'Testing Content Dialog'}
      </DialogContent>
    </Dialog>
  );
};

export default MuiDialog;