import React from 'react';
import { 
  Box, 
  Typography, 
  Paper, 
  Button,
  Alert
} from '@mui/material';
import { useNavigate } from 'react-router-dom';
import CancelIcon from '@mui/icons-material/Cancel';

const PaymentCancelPage = () => {
  const navigate = useNavigate();

  return (
    <Box sx={{ py: 4 }}>
      <Paper sx={{ p: 4, maxWidth: 600, mx: 'auto', textAlign: 'center' }}>
        <CancelIcon color="error" sx={{ fontSize: 80, mb: 2 }} />
        
        <Typography variant="h4" component="h1" gutterBottom>
          Payment Cancelled
        </Typography>
        
        <Alert severity="info" sx={{ mb: 3, mt: 2 }}>
          Your payment was cancelled and you have not been charged.
        </Alert>
        
        <Typography variant="body1" paragraph>
          You can try again or choose a different payment method.
        </Typography>
        
        <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 4 }}>
          <Button
            variant="outlined"
            onClick={() => navigate('/products')}
          >
            Continue Shopping
          </Button>
          
          <Button
            variant="contained"
            color="primary"
            onClick={() => navigate('/cart')}
          >
            Return to Cart
          </Button>
        </Box>
      </Paper>
    </Box>
  );
};

export default PaymentCancelPage;