// components/CountdownTimer.tsx
"use client";

import { useEffect, useState } from "react";
import { Clock } from "lucide-react";

interface CountdownTimerProps {
  expiresAt: string | Date;
}

function formatRemaining(ms: number): string {
  if (ms <= 0) return "Expired";
  const totalSeconds = Math.floor(ms / 1000);
  const days = Math.floor(totalSeconds / 86400);
  const hours = Math.floor((totalSeconds % 86400) / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;

  if (days > 0) return `${days}d ${hours}h ${minutes}m`;
  if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;
  return `${minutes}m ${seconds}s`;
}

export default function CountdownTimer({ expiresAt }: CountdownTimerProps) {
  const expiryTime = new Date(expiresAt).getTime();
  const [remainingMs, setRemainingMs] = useState(() => expiryTime - Date.now());

  useEffect(() => {
    const interval = setInterval(() => {
      setRemainingMs(expiryTime - Date.now());
    }, 1000);
    return () => clearInterval(interval);
  }, [expiryTime]);

  const isExpiringSoon = remainingMs > 0 && remainingMs < 24 * 60 * 60 * 1000;
  const isExpired = remainingMs <= 0;

  return (
    <span
      className={`inline-flex items-center gap-1.5 text-xs font-medium tabular-nums ${
        isExpired
          ? "text-red-400"
          : isExpiringSoon
          ? "text-amber-400"
          : "text-slate-300"
      }`}
    >
      <Clock className="w-3.5 h-3.5" />
      {formatRemaining(remainingMs)}
    </span>
  );
}