"use client";

import { ClockIcon } from "lucide-react";
import { useExamTimer } from "@/components/exam/exam-timer-context";

export default function ExamTimer() {
  const { timeRemaining } = useExamTimer();

  const hours = Math.floor(timeRemaining / 3600);
  const minutes = Math.floor((timeRemaining % 3600) / 60);
  const seconds = timeRemaining % 60;

  const isLowTime = timeRemaining < 5 * 60;

  if (timeRemaining <= 0) return null;

  return (
    <div
      className={`flex items-center gap-2 rounded-md border px-4 py-2 w-[124px] transition-colors ${isLowTime
          ? "border-red-500 bg-red-50 text-red-700"
          : "bg-white text-gray-900 border-gray-200"
        }`}
    >
      <ClockIcon className={`h-4 w-4 ${isLowTime ? "animate-pulse" : ""}`} />
      <span className="font-mono font-medium flex-1 tabular-nums">
        {String(hours).padStart(2, "0")}:
        {String(minutes).padStart(2, "0")}:
        {String(seconds).padStart(2, "0")}
      </span>
    </div>
  );
}