import {Box, Button, Container, Grid, TextField, Typography} from "@mui/material";

const AuthScreen = ({children}) => (
    <Container maxWidth="sm">
        <Box sx={{bgcolor: "action.hover", borderRadius: 2, p: 3}}>
            <Typography textAlign="center" variant="h6" component="h4" sx={{mb: 1}}>
                Sign in to your account
            </Typography>
            <Box sx={{py: 2}}>{children}</Box>
        </Box>
    </Container>
);

export const LoginFrame = () => (


    <AuthScreen>
        <form>
            <Grid container spacing={2}>
                <Grid item xs={12}>
                    <TextField
                        type="email"
                        required
                        placeholder="Email"
                        fullWidth
                        label="Email"
                    />
                </Grid>
                <Grid item xs={12}>
                    <TextField
                        required
                        placeholder="Password"
                        type="password"
                        fullWidth
                        label="Password"
                    />
                </Grid>
                <Grid item xs={12}>
                    <Button variant="contained" fullWidth sx={{mt: 2}}>Sign in</Button>
                </Grid>
            </Grid>
        </form>
    </AuthScreen>
);