// src/components/NavigationMenu.js
import React, { useState } from 'react';
import {
  AppBar,
  Toolbar,
  IconButton,
  Typography,
  Drawer,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Divider,
} from '@mui/material';
import {
  Menu as MenuIcon,
  Home as HomeIcon,
  Assessment as AssessmentIcon,
  EmojiEvents as LeagueIcon,
  SportsMartialArts as PracticeIcon,
  Settings as SettingsIcon,
} from '@mui/icons-material';
import { useScore } from '../context/ScoreContext';

const NavigationMenu = ({ onNavigate }) => {
  const [drawerOpen, setDrawerOpen] = useState(false);
  const { state } = useScore();

  const menuItems = [
    { title: 'Home', icon: <HomeIcon />, action: 'home' },
    { title: 'League Shoots', icon: <LeagueIcon />, action: 'league' },
    { title: 'Practice Shoots', icon: <PracticeIcon />, action: 'practice' },
    { title: 'Statistics', icon: <AssessmentIcon />, action: 'stats' },
    { title: 'Settings', icon: <SettingsIcon />, action: 'settings' },
  ];

  const handleNavigation = (action) => {
    setDrawerOpen(false);
    onNavigate(action);
  };

  return (
    <>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            color="inherit"
            onClick={() => setDrawerOpen(true)}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" sx={{ flexGrow: 1 }}>
            Archery Score Card
          </Typography>
        </Toolbar>
      </AppBar>

      <Drawer
        anchor="left"
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
      >
        <List sx={{ width: 250 }}>
          {menuItems.map((item) => (
            <ListItem 
              button 
              key={item.action}
              onClick={() => handleNavigation(item.action)}
            >
              <ListItemIcon>{item.icon}</ListItemIcon>
              <ListItemText primary={item.title} />
            </ListItem>
          ))}
        </List>
      </Drawer>
    </>
  );
};

export default NavigationMenu;