import * as React from "react"
 
import { useCountdown } from "@/hooks/use-countdown"
 
export function Component() {
  const [endTime, setEndTime] = React.useState(new Date(Date.now() + 10000))
  const [complete, setComplete] = React.useState(false)
 
  const { remaining, isPaused, pause, resume } = useCountdown(endTime, {
    interval: 1000,
    onTick: (time) =>
      console.log(`Tick: ${Math.round(time / 1000)}s remaining`),
    onComplete: () => setComplete(true),
  })
 
  const handleClick = (additionalTime: number) => {
    if (complete) return
    const newEndTime = endTime.getTime() + additionalTime
    setEndTime(new Date(newEndTime))
  }
 
  const formatTime = (milliseconds: number): string => {
    const seconds = Math.ceil(milliseconds / 1000)
    return `${seconds}s`
  }
 
  return (
    <section>
      <h1>Countdown Timer</h1>
      <div className="countdown">
        {complete ? "Complete!" : formatTime(remaining)}
      </div>
      <div className="controls">
        <button
          type="button"
          disabled={complete}
          onClick={() => (isPaused ? resume() : pause())}
        >
          {isPaused ? "Resume" : "Pause"}
        </button>
      </div>
      {!complete && !isPaused && (
        <div className="controls">
          <button onClick={() => handleClick(5000)}>+5s</button>
          <button onClick={() => handleClick(10000)}>+10s</button>
          <button onClick={() => handleClick(15000)}>+15s</button>
        </div>
      )}
    </section>
  )
}