"use client"

import { useState, useEffect } from "react"
import { humanRemaining } from "@/lib/utils/duration"

interface RealTimeCountdownProps {
  expiresAt: string
  className?: string
}

export function RealTimeCountdown({ expiresAt, className = "" }: RealTimeCountdownProps) {
  const [timeRemaining, setTimeRemaining] = useState("")

  useEffect(() => {
    const updateTimer = () => {
      const remaining = humanRemaining(expiresAt)
      setTimeRemaining(remaining)
    }

    updateTimer()
    const interval = setInterval(updateTimer, 1000)

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

  const isExpired = timeRemaining === "Expired"

  return (
    <span className={`font-mono text-sm ${isExpired ? "text-red-600" : "text-green-600"} ${className}`}>
      {timeRemaining}
    </span>
  )
}