import React from 'react';
import { useScore, ACTIONS } from '../context/ScoreContext';
import { useNavigate } from 'react-router-dom';
import { Button, Typography, Box, Grid } from '@mui/material';

const GameSummary = () => {
  const { state, dispatch } = useScore();
  const navigate = useNavigate();

  const handleReturnToMenu = () => {
    dispatch({ type: ACTIONS.RESET_GAME });
    navigate('/');
  };

  return (
    <Box sx={{ p: 4 }}>
      <Typography variant="h4" gutterBottom align="center">
        Game Summary
      </Typography>
      
      {/* Your existing summary content here */}
      
      <Box sx={{ mt: 4, display: 'flex', justifyContent: 'center' }}>
        <Button 
          variant="contained" 
          color="primary"
          onClick={handleReturnToMenu}
          sx={{ minWidth: 200 }}
        >
          Return to Main Menu
        </Button>
      </Box>
    </Box>
  );
};

export default GameSummary;