"use client"
import { isAfter, intervalToDuration, Duration } from "date-fns"
import { useState } from "react"
import { useInterval } from "./useInterval"

export function useDuration(end: Date): Duration {
  const now = Date.now()
  const getDurationToEnd = () => {
    return isAfter(end, now)
      ? intervalToDuration({
          start: now,
          end,
        })
      : { years: 0, months: 0, days: 0, hours: 0, minutes: 0, seconds: 0 }
  }

  const [duration, setDuration] = useState<Duration>(getDurationToEnd())

  useInterval(() => setDuration(getDurationToEnd()), 1000)

  return duration
}