import type { ComponentType } from "react"
import { useEffect, useState } from "react"

export function withCountdown(Component): ComponentType {
    return (props) => {
        const [timeRemaining, setTimeRemaining] = useState("")

        const calculateTimeRemaining = () => {
            const now = new Date()
            const tomorrow = new Date(now)
            tomorrow.setDate(tomorrow.getDate() + 1)
            tomorrow.setHours(0, 0, 0, 0)
            const difference = tomorrow.getTime() - now.getTime()

            const hours = Math.floor(
                (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
            )
            const minutes = Math.floor(
                (difference % (1000 * 60 * 60)) / (1000 * 60)
            )
            const seconds = Math.floor((difference % (1000 * 60)) / 1000)

            return `${hours} hours ${minutes} mins ${seconds} secs`
        }

        useEffect(() => {
            const timer = setInterval(() => {
                setTimeRemaining(calculateTimeRemaining())
            }, 1000)

            // Clean up the interval when the component is unmounted
            return () => {
                clearInterval(timer)
            }
        }, [])

        return <Component {...props} text={timeRemaining} />
    }
}