import { Close } from '@mui/icons-material'
import {
  alpha,
  Box,
  Dialog,
  DialogContent,
  IconButton,
  styled,
  Typography,
} from '@mui/material'

const StyledDialogHeader = styled(Box)(({ theme }) => ({
  height: '64px',
  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  padding: '0.6rem 1rem',
}))

export default function DialogTemplate({
  handleClose,
  modal,
  setModal,
  ...props
}) {
  return (
    <Dialog
      sx={{
        zIndex: 500,
        minHeight: '70vh',
        '& .MuiDialog-container': {
          '& .MuiPaper-root': {
            maxWidth: '1420px',
          },
        },
      }}
      onClose={handleClose}
      open={modal.open}
      {...props}
      PaperProps={{
        sx: {
          borderRadius: '10px',
        },
      }}
    >
      <StyledDialogHeader>
        <Typography fontWeight={600}>{modal.title}</Typography>
        <IconButton onClick={() => setModal({ ...modal, open: false })}>
          <Close />
        </IconButton>
      </StyledDialogHeader>
      <DialogContent sx={{ padding: '0' }}>
        <>{modal.content({ close: handleClose })}</>
      </DialogContent>
    </Dialog>
  )
}
