import React from 'react'
import Grid from '@mui/material/Grid2';
import { Box, Button, TextField, Link, Typography } from '@mui/material'

const SignUpForm = () => {

    const handleSubmit = (e) => {
        e.preventDefault();
        // Handle form submission logic
        console.log('Form submitted');
      };

    return (
        <Grid>
            <Box
                component="form"
                onSubmit={handleSubmit}
                sx={{
                    width: '100%',
                    maxWidth: 400,
                    mx: 'auto',
                    mt: 4,
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 4,
                }}
            >

                <TextField
                    label="Full Name"
                    variant="outlined"
                    fullWidth
                    required
                />

                <TextField
                    label="Email"
                    type="email"
                    variant="outlined"
                    fullWidth
                    required
                />

                <TextField
                    label="Password"
                    type="password"
                    variant="outlined"
                    fullWidth
                    required
                />

                <TextField
                    label="Confirm Password"
                    type="password"
                    variant="outlined"
                    fullWidth
                    required
                />

                

                <Button
                    variant="contained"
                    color="common.black"
                    onClick={() => { window.location.href = "/checkout" }}
                    sx={{
                        backgroundColor: (theme) => theme.palette.common.black,
                        color: "white",
                        textTransform: "none",
                        mx: "auto",
                        px: 8,
                        py: 2,
                        width: "fit-content",
                        "&:hover": {
                            backgroundColor: (theme) => theme.palette.grey[900],
                        },
                    }}>REGISTER</Button>
                
                <Typography variant="body1">By registering you agree to our <Link>Terms and Conditions</Link> and <Link>Privacy Policy</Link> </Typography>

            </Box>
        </Grid>
    )
}

export default SignUpForm