import { Box, HStack, Skeleton, SkeletonText, VStack, useBreakpointValue } from '@chakra-ui/react'

const ProductCardSkeleton = () => {
  const wrapperHeight = useBreakpointValue({ base: '300px', md: '350px' })
  return (
    <Box
      role='status'
      w='100%'
      bgColor='white'
      h={wrapperHeight}
      borderWidth='1px'
      borderRadius='md'
    >
      <Skeleton height='50%' {...skeletonColors} />

      <VStack padding='10px 12px 16px 12px' height='50%'>
        <Box w='full'>
          <Skeleton height='12px' w='30%' {...skeletonColors} />
          <SkeletonText
            noOfLines={2}
            spacing='8px'
            skeletonHeight='12px'
            mt='12px'
            {...skeletonColors}
          />
        </Box>

        <VStack spacing='12px' alignItems='flex-start' mt='20px' w='full'>
          <HStack spacing='8px' w='full'>
            <Skeleton height='12px' w='60%' {...skeletonColors} />
            <Skeleton height='12px' w='10%' {...skeletonColors} />
          </HStack>
          <Skeleton height='12px' w='50%' {...skeletonColors} />
        </VStack>
      </VStack>
      <span className='sr-only'>Loading...</span>
    </Box>
  )
}

const skeletonColors = {
  startColor: 'gray.200',
  endColor: 'gray.400'
}

export default ProductCardSkeleton