import React, { useState } from "react";
import {
    TextField,
    Button,
    Box,
    Typography,
    Paper,
} from "@mui/material";

const TicketConfirmationPage = () => {
    // State for form fields
    const [ticketId, setTicketId] = useState("");

    // Handle form submission
    const handleSubmit = (e) => {
        e.preventDefault();
        if (ticketId) {
            console.log("Registered with:", { ticketId });
        } else {
            alert("Please fill in all fields.");
        }
    };

    return (
        <Box sx={{ padding: 3 }}>
            <Box sx={{ display: 'flex', justifyContent: 'flex-start', pr: 2, }}>
                <Typography sx={{ color: 'gray', fontSize: '30px' }}>Ticket Confirmation</Typography>
            </Box>
            <Box sx={{ paddingTop: 2 }}>
                <Box sx={{ display: 'flex', justifyContent: 'flex-start', pr: 2, }}>
                    <Typography sx={{ color: 'gray', fontSize: '20px' }}>Confirm Ticket</Typography>
                </Box>
                <Box sx={{ padding: 6 }}>
                    <Paper sx={{ width: '100%', overflow: 'hidden' }}>
                        <form onSubmit={handleSubmit}>
                            <Box mb={2} m={2}>
                                <TextField
                                    label="Ticket ID"
                                    variant="outlined"
                                    fullWidth
                                    value={ticketId}
                                    onChange={(e) => setTicketId(e.target.value)}
                                    required
                                />
                            </Box>

                            <Box mt={2} mb={2} textAlign="center">
                                <Button style={{ marginRight: '5px' }} variant="contained">Reset</Button>
                                <Button variant="contained" color="success">Submit</Button>
                            </Box>
                        </form>
                    </Paper>
                </Box>
            </Box>
        </Box>
    );
};

export default TicketConfirmationPage;