import React, { useEffect } from 'react'

// Default values for components
const DEFAULTS = {
  timer: 2 * Math.PI,
}

export function Timer({ initial }: {
  initial?: number,
}) {
  initial ??= DEFAULTS.timer
  const [seconds, setSeconds] = React.useState(initial)
  const tick = () => setSeconds(seconds + 1)

  useEffect(() => {
    setTimeout(tick, 1000)
  }, [seconds])

  return <div>
    <h1 className='text-xl font-medium'>{seconds}</h1>
  </div>
}