import React from 'react'
import Drawer from '@mui/material/Drawer'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import Divider from '@mui/material/Divider'
import List from '@mui/material/List'
import Link from '@mui/material/Link'
import ListItem from '@mui/material/ListItem'
import ListItemButton from '@mui/material/ListItemButton'
import ListItemText from '@mui/material/ListItemText'
import Stack from '@mui/material/Stack'
import SignInButton from './account-login-button'
import type { NavItemProps } from '@/data/navigation-items'

type Props = {
    handleDrawerToggle: () => void;
    navItems: NavItemProps[];
    mobileOpen: boolean;
    drawerWidth: number;
}

const MobileDrawer = (props: Props) => {
    const { handleDrawerToggle, navItems, mobileOpen, drawerWidth } = props;

  return (
    <Drawer
        variant='temporary'
        open={mobileOpen}
        onClose={handleDrawerToggle}
        ModalProps={{
          keepMounted: true,  
        }}
        sx={{
            display: { xs: 'initial', lg: 'none' },
            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
        }}
    >
        <Box 
          sx={{ 
            textAlign: 'center',
          }}
        >
          <Box
            sx= {{
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'center'
            }}
          >
            <Box 
              component='img'
              src='/logo.png'
              sx={{ height: '40px', mr: '8px'}}
            />
            <Typography
              variant="h5"
              sx={{ my: 2, fontWeight: 700}}
            >
              Super Fit
            </Typography>
          </Box>
        <Divider />
        <List>
          {navItems.map((item, index) => (
            <Link
              href={item.href}
              key={index}
            >
              <ListItem
                disablePadding
                onClick={handleDrawerToggle}
              >
                <ListItemButton sx={{ textAlign: 'center' }}>
                  <ListItemText sx={{color: '#000'}} primary={item.title} />
                </ListItemButton>
              </ListItem>
            </Link>
          ))}
        </List>
        <Divider sx={{ mb: 2 }} />
        <Stack
          direction="column"
          spacing={2}
          sx={{ px: 3 }}
        >
            <SignInButton />
        </Stack>
      </Box>
    </Drawer>
  )
}

export default MobileDrawer