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

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',
}))

interface Props extends DialogProps {
  onClose: () => void
  children: ReactNode
}

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