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

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

const StyledDrawerContent = styled(Box)(({ theme }) => ({
  padding: '1rem',
  height: 'calc(100vh - 64px)',
  overflowY: 'auto',
  paddingBottom: '4rem',
}))

export const DrawerTemplate = ({ handleClose, modal, setModal }) => {
  return (
    <Drawer
      anchor="right"
      elevation={10}
      onClose={handleClose}
      open={modal.open}
      sx={{
        zIndex: 500,
        '& .MuiDrawer-paper': {
          boxSizing: 'border-box',
          width: 600,
        },
      }}
    >
      <StyledDrawerHeader>
        <Typography fontWeight={600}>{modal.title}</Typography>
        <IconButton onClick={() => setModal({ ...modal, open: false })}>
          <Close />
        </IconButton>
      </StyledDrawerHeader>
      <StyledDrawerContent>
        {modal.content({ close: handleClose })}
      </StyledDrawerContent>
    </Drawer>
  )
}
