import { Box, BoxProps, Flex } from '@chakra-ui/react'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import * as React from 'react'
dayjs.extend(relativeTime)

interface IFlipCardProps extends BoxProps {
  FrontElement: React.ReactElement
  BackElement: React.ReactElement
}

const FlipCard: React.FunctionComponent<IFlipCardProps> = (props) => {
  const { FrontElement, BackElement, ...styles } = props
  return (
    <Box cursor={'pointer'} fontWeight={'primary'} minH={'340px'} w={'100%'} maxW={'280px'} role={'group'} {...styles}>
      <Box
        w={'100%'}
        h={'100%'}
        pos={'relative'}
        transition={'transform 0.3s'}
        borderRadius={'20px'}
        style={{ transformStyle: 'preserve-3d' }}
        _groupHover={{
          transform: 'rotateY(180deg)',
        }}
      >
        <Flex
          flexDir={'column'}
          bg="#0E1639"
          rounded={'6px'}
          p={6}
          pos={'absolute'}
          h={'full'}
          w={'full'}
          style={{ gap: '20px', backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden' }}
        >
          {FrontElement}
        </Flex>
        <Flex
          flexDir={'column'}
          bg="#0E1639"
          rounded={'6px'}
          p={6}
          pos={'absolute'}
          h={'full'}
          w={'full'}
          style={{ gap: '20px', backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden' }}
          zIndex={3}
          inset={0}
          transform={'rotateY(180deg)'}
        >
          {BackElement}
        </Flex>
      </Box>
    </Box>
  )
}

export default FlipCard