{"size": 959, "ext": "js", "max_stars_repo_path": "components/countdown/index.js", "max_stars_repo_name": "sebastian-m-gzz/Joker", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "components/countdown/index.js", "max_issues_repo_name": "sebastian-m-gzz/Joker", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "components/countdown/index.js", "max_forks_repo_name": "sebastian-m-gzz/Joker", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.975, "max_line_length": 87, "alphanum_fraction": 0.5172054223}
import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router'

const Countdown = (props) => {
  const router = useRouter();
  const [minutes, setMinutes] = useState(props.minutes);
  const [seconds, setSeconds] = useState(props.seconds);

  useEffect(() => {
    const myInterval = setInterval(() => {

      if (seconds > 0) {
        setSeconds(seconds-1);
      }
      if (seconds === 0) {
          if (minutes === 0) {
              clearInterval(myInterval)
              router.push('/game');
              props.callback()
          } else {
            setMinutes(minutes - 1);
            setSeconds(59);
          }
      } 
    }, 1000)

    return () => clearInterval(myInterval);
  })

  return (
    <div>
      { minutes === 0 && seconds === 0
          ? <h1>Start!</h1>
          : <h1>Time Remaining: {minutes}:{seconds < 10 ? `0${seconds}` : seconds}</h1>
        }
    </div>
  )
}

export default Countdown;