import { Box, Button, Stack, Typography } from '@mui/material'
import React from 'react'
import BlankLayout from 'src/@core/layouts/BlankLayout'
import ShopfrontLayout from 'src/@core/layouts/ShopfrontLayout'
import { useRouter } from 'next/router'
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
import CardProductDetail from 'src/components/CardProductDetail'

function ProductShow() {
  let router = useRouter()

  return (
    <>
      <Stack direction='column' justifyContent={'center'} alignItems={'center'}>
        <Box width='80vw'>
          <Button
            onClick={() => {
              router.push('/')
            }}
          >
            <ChevronLeftIcon />
            <Typography variant='caption'>Back</Typography>
          </Button>
        </Box>

        <Box width='80vw' mt={'1rem'}>
          <CardProductDetail />
        </Box>
      </Stack>
    </>
  )
}

ProductShow.getLayout = page => <ShopfrontLayout>{page}</ShopfrontLayout>

export default ProductShow
