import { Drawer, Box, Typography, IconButton, Divider } from '@mui/material'
import { Close } from '@mui/icons-material'
import type { PropsWithChildren } from 'react'
import type { DrawerProps } from '@mui/material'

interface MuiDrawerProps extends DrawerProps {
  title: string
  onClose: () => void
}

const MuiDrawer: React.FC<PropsWithChildren<MuiDrawerProps>> = (props) => {
  const { children, title, onClose, PaperProps, ...rest } = props
  return (
    <Drawer
      anchor="right"
      onClose={onClose}
      PaperProps={{
        elevation: 0,
        sx: {
          width: '360px',
          borderRadius: '10px 0px 0px 10px',
        },
        ...PaperProps,
      }}
      {...rest}
    >
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', p: 2 }}>
        <Typography variant="body1" fontWeight="500">
          {title || 'drawer'}
        </Typography>
        <IconButton color="inherit" onClick={onClose} edge="end">
          <Close color="primary" fontSize="small" />
        </IconButton>
      </Box>
      <Divider />
      {children}
    </Drawer>
  )
}

export default MuiDrawer