import { useCallback, useEffect } from 'react'

const ANIMATION_OFFSET = 300

export const animationVariants = {
  initial: (animateLeft: boolean) => ({
    opacity: 0,
    x: animateLeft ? ANIMATION_OFFSET : -ANIMATION_OFFSET,
  }),
  animate: { opacity: 1, x: 0 },
  exit: (animateLeft: boolean) => ({
    opacity: 0,
    x: animateLeft ? -ANIMATION_OFFSET : ANIMATION_OFFSET,
  }),
} as const

export function useKeyboardNavigation(onPrev: () => void, onNext: () => void) {
  const handleKeyDown = useCallback(
    (e: KeyboardEvent) => {
      if (e.key === 'ArrowLeft') onPrev()
      if (e.key === 'ArrowRight') onNext()
    },
    [onPrev, onNext]
  )

  useEffect(() => {
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [handleKeyDown])
}