maternal-app/maternal-web/components/layouts/MobileNav/MobileNav.tsx

'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import {
  AppBar,
  Toolbar,
  IconButton,
  Typography,
  Drawer,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Avatar,
  Box,
  Divider,
} from '@mui/material';
import {
  Menu as MenuIcon,
  Home,
  Timeline,
  Chat,
  Insights,
  Settings,
  ChildCare,
  Group,
  Logout,
} from '@mui/icons-material';

export const MobileNav = () => {
  const [drawerOpen, setDrawerOpen] = useState(false);
  const router = useRouter();

  const menuItems = [
    { label: 'Dashboard', icon: <Home />, path: '/' },
    { label: 'Track Activity', icon: <Timeline />, path: '/track' },
    { label: 'AI Assistant', icon: <Chat />, path: '/ai-assistant' },
    { label: 'Insights', icon: <Insights />, path: '/insights' },
    { label: 'Children', icon: <ChildCare />, path: '/children' },
    { label: 'Family', icon: <Group />, path: '/family' },
    { label: 'Settings', icon: <Settings />, path: '/settings' },
  ];

  const handleNavigate = (path: string) => {
    router.push(path);
    setDrawerOpen(false);
  };

  return (
    <>
      <AppBar position="static" elevation={1} sx={{ bgcolor: 'background.paper' }}>
        <Toolbar>
          <IconButton
            edge="start"
            color="primary"
            aria-label="menu"
            onClick={() => setDrawerOpen(true)}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1, color: 'primary.main', fontWeight: 600 }}>
            Maternal
          </Typography>
          <Avatar sx={{ bgcolor: 'primary.main' }}>U</Avatar>
        </Toolbar>
      </AppBar>

      <Drawer
        anchor="left"
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
      >
        <Box
          sx={{ width: 280 }}
          role="presentation"
        >
          <Box sx={{ p: 3, bgcolor: 'primary.light' }}>
            <Avatar sx={{ width: 64, height: 64, bgcolor: 'primary.main', mb: 2 }}>U</Avatar>
            <Typography variant="h6" fontWeight="600">User Name</Typography>
            <Typography variant="body2" color="text.secondary">user@example.com</Typography>
          </Box>

          <List>
            {menuItems.map((item) => (
              <ListItem key={item.path} disablePadding>
                <ListItemButton onClick={() => handleNavigate(item.path)}>
                  <ListItemIcon sx={{ color: 'primary.main' }}>
                    {item.icon}
                  </ListItemIcon>
                  <ListItemText primary={item.label} />
                </ListItemButton>
              </ListItem>
            ))}
          </List>

          <Divider sx={{ my: 1 }} />

          <List>
            <ListItem disablePadding>
              <ListItemButton onClick={() => handleNavigate('/logout')}>
                <ListItemIcon sx={{ color: 'error.main' }}>
                  <Logout />
                </ListItemIcon>
                <ListItemText primary="Logout" />
              </ListItemButton>
            </ListItem>
          </List>
        </Box>
      </Drawer>
    </>
  );
};