import { Grid, Typography } from '@mui/material';
import { Box } from '@mui/system';
import OrderCard from '../cards/order-card/OrderCard';
import ShippingDetailsForm from '../forms/shipping-details/ShippingDetailsForm';

const ProfileContent = () => {
  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' }}
        >
          Welcome to your user account
        </Typography>
      </Grid>
      <Grid item xs={8} sx={{ mt: 4 }}>
        <Typography sx={{ pl: 12, fontSize: 20 }}>
          Save details for later
        </Typography>
      </Grid>
      <Grid item xs={4} sx={{ mt: 4 }}>
        <Typography sx={{ fontSize: 20 }}>Previous Orders</Typography>
      </Grid>
      <Grid item xs={8}>
        <ShippingDetailsForm></ShippingDetailsForm>
      </Grid>
      <Grid item xs={4}>
        <Box sx={{ width: '60%', mt: 2 }}>
          <OrderCard
            data={{ date: '2022-09-02', name: 'John Doe', totalPrice: 30 }}
          ></OrderCard>
          <OrderCard
            data={{ date: '2022-09-02', name: 'John Doe', totalPrice: 30 }}
          ></OrderCard>
          <OrderCard
            data={{ date: '2022-09-02', name: 'John Doe', totalPrice: 30 }}
          ></OrderCard>
        </Box>
      </Grid>
    </Grid>
  );
};

export default ProfileContent;