import { css } from '@emotion/css'
import { useCallback, useState } from 'react'

export const wiggleClass = css`
  animation: wiggle 0.3s ease-in-out;

  @keyframes wiggle {
    0%,
    100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-5px);
    }
    50% {
      transform: translateX(5px);
    }
    75% {
      transform: translateX(-3px);
    }
  }
`

const useWiggle = () => {
  const [wiggling, setWiggling] = useState(false)

  const beginWiggling = useCallback(() => {
    setWiggling(true)
    setTimeout(() => setWiggling(false), 300)
  }, [])

  return { wiggling, beginWiggling }
}

export default useWiggle
