// src/components/GameSetup.js
import React from 'react';
import { 
  Button,
  Card,
  CardContent,
  CardHeader,
  Grid,
  Typography 
} from '@mui/material';
import { useScore, ACTIONS } from '../context/ScoreContext';

const GameSetup = ({ onGameStart }) => {
  const { dispatch } = useScore();

  const startGame = (gameType) => {
    dispatch({
      type: ACTIONS.START_NEW_ROUND,
      payload: { gameType }
    });
    onGameStart();
  };

  return (
    <Grid container spacing={3} justifyContent="center" alignItems="center" style={{ minHeight: '80vh' }}>
      <Grid item xs={12} sm={8} md={6}>
        <Card>
          <CardHeader 
            title="Start New Game" 
            titleTypographyProps={{ align: 'center' }}
          />
          <CardContent>
            <Grid container spacing={3}>
              <Grid item xs={12}>
                <Typography variant="body1" align="center" gutterBottom>
                  Select your game type:
                </Typography>
              </Grid>
              <Grid item xs={6}>
                <Button
                  fullWidth
                  variant="contained"
                  color="primary"
                  size="large"
                  onClick={() => startGame('450')}
                >
                  450 Round
                </Button>
              </Grid>
              <Grid item xs={6}>
                <Button
                  fullWidth
                  variant="contained"
                  color="secondary"
                  size="large"
                  onClick={() => startGame('300')}
                >
                  300 Round
                </Button>
              </Grid>
            </Grid>
          </CardContent>
        </Card>
      </Grid>
    </Grid>
  );
};

export default GameSetup;