interface DraftTimerProps {
  timeRemaining: number; // in seconds
  isActive?: boolean;
}

export function DraftTimer({ timeRemaining, isActive = false }: DraftTimerProps) {
  // Format time as M:SS or H:MM:SS
  const formatTime = (seconds: number): string => {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;

    if (hours > 0) {
      return `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
    }
    return `${minutes}:${String(secs).padStart(2, "0")}`;
  };

  // Determine color based on time remaining
  const getColorClass = (): string => {
    if (timeRemaining > 60) {
      return "text-green-600 dark:text-green-400";
    } else if (timeRemaining > 30) {
      return "text-yellow-600 dark:text-yellow-400";
    } else if (timeRemaining > 10) {
      return "text-red-600 dark:text-red-400";
    } else {
      return "text-red-600 dark:text-red-400 animate-pulse";
    }
  };

  return (
    <div className={`text-sm font-mono font-semibold ${getColorClass()} ${isActive ? "font-bold" : ""}`}>
      {formatTime(timeRemaining)}
    </div>
  );
}