import { Breadcrumbs, Button, Divider, Grid, Typography } from '@mui/material';
import { Box } from '@mui/system';

const ReviewContent = () => {
  return (
    <Grid container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
      <Grid item xs={12}>
        <Typography
          variant="h3"
          sx={{ pl: 12, mt: 12, height: '100%', color: 'primary.main' }}
        >
          Shipping
        </Typography>
      </Grid>
      <Grid item xs={12}>
        <Divider sx={{ backgroundColor: 'primary.main', mx: 12 }} />
      </Grid>
      <Grid item xs={12} sx={{ mt: 4 }}>
        <Breadcrumbs
          aria-label="breadcrumb"
          separator="›"
          sx={{ pl: 12, fontSize: 20 }}
        >
          <Typography>Cart</Typography>
          <Typography>Checkout</Typography>
          <Typography>Shipping</Typography>
          <Typography>Payment</Typography>
          <Typography color="red">Review</Typography>
        </Breadcrumbs>
      </Grid>
      <Grid item xs={12} sx={{ mt: 1 }}>
        <Typography
          sx={{
            width: '100%',
            textAlign: 'center',
            color: 'primary.main',
            fontWeight: 600,
            fontSize: 22,
          }}
        >
          ORDER COMPLETE SUCCESSFULLY
        </Typography>
      </Grid>
      <Grid item xs={12} sx={{ mt: 1 }}>
        <Typography
          sx={{
            width: '100%',
            fontWeight: 600,
            mt: 2,
            textAlign: 'center',
          }}
        >
          Thank you for placing your order with us. We wll get to work on
          sending your order as soon as possible
        </Typography>
      </Grid>
      <Grid item xs={12} sx={{ mt: 1 }}>
        <Typography
          sx={{
            width: '100%',
            textAlign: 'center',
            mt: 2,
            fontSize: 44,
            fontWeight: 600,
          }}
        >
          Order Summary
        </Typography>
      </Grid>
      <Grid item xs={12}>
        <Box
          sx={{
            backgroundColor: '#f2f2f2',
            mt: 4,
            ml: 12,
            width: '85%',
            borderRadius: 2,
            p: 1,
          }}
        >
          <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
            Order placed on: 05/09/2022
          </Typography>
        </Box>
      </Grid>
      <Grid item xs={12}>
        <Box
          sx={{
            backgroundColor: '#f2f2f2',
            ml: 12,
            width: '85%',
            borderRadius: 2,
            p: 1,
          }}
        >
          <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
            Email: johndoe@test
          </Typography>
        </Box>
      </Grid>
      <Grid item xs={12}>
        <Box
          sx={{
            backgroundColor: '#f2f2f2',
            ml: 12,
            width: '85%',
            borderRadius: 2,
            p: 1,
          }}
        >
          <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
            Total: $60
          </Typography>
        </Box>
      </Grid>
      <Grid item xs={12}>
        <Box
          sx={{
            backgroundColor: '#f2f2f2',
            ml: 12,
            width: '85%',
            borderRadius: 2,
            p: 1,
          }}
        >
          <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
            Shipping Address: 1684 Upton Avenue, Locke Mills, United Kingdom,
            04255
          </Typography>
        </Box>
      </Grid>
      <Grid item xs={12} sx={{ mt: 1 }}>
        <Box
          sx={{
            width: '100%',
            display: 'flex',
            justifyContent: 'center',
            mt: 2,
            borderRadius: 2,
            p: 1,
          }}
        >
          <Button
            variant="contained"
            sx={{
              mt: 3,
              mb: 2,
              height: 50,
              width: 150,
              textTransform: 'none',
              backgroundColor: '#CBA213',
              color: 'white',
              mr: 2,
              fontSize: 16,
            }}
          >
            Back to Home
          </Button>
        </Box>
      </Grid>
    </Grid>
  );
};

export default ReviewContent;