coffee/components/cards/order-summary-card/OrderSummaryCard.jsx

import { Button, Divider, Paper, Typography } from '@mui/material';
import { Box } from '@mui/system';
import Image from 'next/image';
import { useRouter } from 'next/router';
import PropType from 'prop-types';

const OrderSummaryCard = ({ data }) => {
  const router = useRouter();
  return (
    <Paper
      sx={{ p: 3, width: '100%', mb: 2, backgroundColor: '#f1f1f1' }}
      elevation={3}
    >
      <Typography
        sx={{
          fontSize: 26,
          color: 'primary.main',
          textAlign: 'center',
          width: '100%',
        }}
      >
        Order Summary
      </Typography>
      <Typography sx={{ mt: 4 }}>Items total:${data.totalPrice}</Typography>
      <Typography sx={{ mt: 1.5 }}>Shipping Costs: FREE</Typography>
      <Typography sx={{ mt: 1.5, mb: 1.5 }}>
        Total: ${data.totalPrice}
      </Typography>
      <Divider />
      <Box sx={{ textAlign: 'center', mt: 4, width: '100%' }}>
        <Button
          sx={{
            backgroundColor: '#0066ff',
            color: 'white',
            textTransform: 'none',
            px: 2,
          }}
          startIcon={
            <Image src="/images/lock.svg" alt="lock" width={18} height={18} />
          }
          disabled={data.totalQuantity > 0 ? false : true}
          onClick={() => {
            router.push('/checkout');
          }}
        >
          Proceed to Checkout
        </Button>
      </Box>
      <Typography sx={{ mt: 3, fontSize: 13 }}>
        Once the checkout process begins you will have an hour to complete your
        checkout otherwise you will be returned back to the cart to start over.
      </Typography>
    </Paper>
  );
};

OrderSummaryCard.propTypes = {
  data: PropType.shape({
    totalPrice: PropType.number,
    totalQuantity: PropType.number,
  }),
};

export default OrderSummaryCard;