import { useEffect, useRef } from 'react'
import { useInView } from 'framer-motion'
import { useLottie } from 'lottie-react'

import { workingTogetherDesktop, workingTogetherMobile } from '@/lib/lottie'
import { useBreakpoint } from '@/lib/hooks'

type Props = {}

export default function WorkingTogetherLottie({}: Props) {
  const { breakpoint } = useBreakpoint()
  const animationContainerRef = useRef<HTMLDivElement>(null)
  const isLottieAnimationInView = useInView(animationContainerRef, { once: true, amount: 0 })
  const { View: Lottie, play: playLottieAnimation } = useLottie({
    animationData: [null, 'xs', 'xxs'].includes(breakpoint) ? workingTogetherMobile : workingTogetherDesktop,
    autoplay: false,
    loop: false,
  })

  useEffect(() => {
    if (isLottieAnimationInView) {
      playLottieAnimation()
    }
  }, [isLottieAnimationInView, playLottieAnimation])

  return (
    <div ref={animationContainerRef} className="flex justify-center pt-8 sm:pt-16 lg:pt-24">
      {Lottie}
    </div>
  )
}