import ChevronLeft from '@mui/icons-material/ChevronLeft';
import { Button, Stack, Typography } from '@mui/material';
import AccountArrowLeftOutline from 'mdi-material-ui/AccountArrowLeftOutline';
import Link from 'next/dist/client/link';
import { useContext, useEffect } from 'react';
import ShopfrontLayout from 'src/@core/layouts/ShopfrontLayout';
import { CartContext } from 'src/contexts/cart';

function Thankyou() {
  let { emptyCart } = useContext(CartContext);
  useEffect(() => {
    emptyCart();
  }, []);

  return (
    <>
      <Stack
        direction="column"
        justifyContent={'center'}
        alignItems={'center'}
        height={['80vh']}
        sx={{}}
        spacing={'2rem'}
      >
        <Typography variant="h4">Thaks for purchase !!!</Typography>
        <Typography variant="h4">checkout done</Typography>
        <Link href="/shopfront">
          <Button variant="contained" startIcon={<ChevronLeft />}>
            Back
          </Button>
        </Link>
      </Stack>
    </>
  );
}

Thankyou.getLayout = page => <ShopfrontLayout>{page}</ShopfrontLayout>;

export default Thankyou;
