import { Box, Center, IconButton, Text } from '@chakra-ui/react'
import { AnimatePresence, motion } from 'framer-motion'
import { useEffect, useState } from 'react'
import { BiX } from 'react-icons/bi'

const MotionCenter = motion(Center)

const PromoModalBanner = () => {
  const [showBanner, setShowBanner] = useState(true)
  const [timer, setTimmer] = useState(15)

  // after 10 seconds, hide the banner
  useEffect(() => {
    setTimeout(() => {
      setShowBanner(false)
    }, 15000)
    const intervalTimmer = setInterval(() => {
      setTimmer((prev) => prev - 1)
    }, 1000)

    return () => {
      clearInterval(intervalTimmer)
    }
  }, [])

  return (
    <AnimatePresence>
      {showBanner && (
        <MotionCenter
          key='banner'
          bg='blackAlpha.900'
          position='fixed'
          top='0'
          left='0'
          right='0'
          bottom='0'
          zIndex='1'
          initial={{
            opacity: 0,
            scale: 1.05,
          }}
          animate={{
            opacity: 1,
            scale: 1,
            transition: {
              duration: 0.4,
            },
          }}
          exit={{
            opacity: 0,
            transition: {
              duration: 0.2,
            },
          }}
          transition={{
            type: 'spring',
            stiffness: 300,
            damping: 200,
          }}
        >
          <Box position='relative' width='md' m='5'>
            <Box borderRadius='md' overflow='hidden'>
              <img src='/images/banner-promo.jpeg' alt='Banner' />
            </Box>
            <IconButton
              icon={<BiX />}
              size='md'
              fontSize='2xl'
              borderRadius='full'
              position='absolute'
              top='0'
              right='0'
              mt='-1rem'
              mr='-1rem'
              onClick={() => setShowBanner(false)}
            />
            <Text
              fontSize='sm'
              fontWeight='medium'
              color='white'
              textAlign='center'
              position='absolute'
              bottom='-2rem'
              left='0'
              right='0'
            >
              Fechando automaticamente em {timer} segundos
            </Text>
          </Box>
        </MotionCenter>
      )}
    </AnimatePresence>
  )
}

export default PromoModalBanner