sarlink-portal/components/billing/expiry-time-countdown.tsx

'use client'
import { usePathname, useRouter } from 'next/navigation'
import { useEffect, useState } from 'react'
import { Progress } from '@/components/ui/progress'

const calculateTimeLeft = (expiresAt: string) => {
  const now = Date.now()
  const expirationTime = new Date(expiresAt).getTime()
  return Math.max(0, Math.floor((expirationTime - now) / 1000))
}

const HumanizeTimeLeft = (seconds: number) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}m ${remainingSeconds}s`
}

export default function ExpiryCountDown({ expiresAt }: { expiresAt: string }) {
  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(expiresAt))
  const [mounted, setMounted] = useState(false)
  const router = useRouter()
  const pathname = usePathname()
  useEffect(() => {
    setMounted(true)
  }, [])

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft(calculateTimeLeft(expiresAt))
    }, 1000)

    return () => clearInterval(timer)
  }, [expiresAt])

  useEffect(() => {
    if (timeLeft <= 0) {
      router.replace(pathname)
    }
  }, [timeLeft, router, pathname])

  if (!mounted) {
    return null
  }
  return (
    <div className='overflow-clip relative mx-2 p-4 rounded-md border border-dashed flex items-center justify-between text-muted-foreground'>
      <div className='absolute inset-0 title-bg mask-b-from-0' />
      {timeLeft ? (
        <span>Time left: {HumanizeTimeLeft(timeLeft)}</span>
      ) : (
        <span>Top up has expired. Please make another topup to add balance to your wallet.</span>
      )}
      {timeLeft > 0 && (
        <Progress className='absolute bottom-0 left-0 right-0' color='#f49b5b' value={timeLeft / 600 * 100} />
      )}
    </div>
  )
}