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

interface INftPlaceholderProps {}

const NftPlaceholder: React.FunctionComponent<INftPlaceholderProps> = (props) => {
  return (
    <Box
      cursor={'pointer'}
      fontWeight={'primary'}
      bg="bg.primary"
      borderRadius={'20px'}
      minH={'368px'}
      w={'100%'}
      maxW={{ base: `100%`, md: '270px' }}
      overflow={'hidden'}
      p={'16px 16px 18px'}
    >
      <Skeleton minW={'242px'} minH={'242px'} fadeDuration={1} />
      <VStack mt={'5px'} spacing={'12px'}>
        <HStack fontWeight={'600'} color={'secondary'} w={'full'} justifyContent={'space-between'}>
          <Skeleton w={'full'} h={'24px'} />
          <Skeleton w={'full'} h={'24px'} />
        </HStack>
        <HStack justifyContent={'flex-start'} w={'full'}>
          <Skeleton w={'full'} h={'24px'} />
        </HStack>
        <Skeleton w={'full'} h={'24px'} />
      </VStack>
    </Box>
  )
}

export default NftPlaceholder