"use client";

import { useEffect, useState, useCallback } from "react";

interface TimerProps {
  seconds: number;
  onTimeUp: () => void;
  label?: string;
  variant?: "classmaker" | "modern";
}

export default function Timer({ seconds, onTimeUp, label, variant = "classmaker" }: TimerProps) {
  const [remaining, setRemaining] = useState(seconds);

  useEffect(() => {
    setRemaining(seconds);
  }, [seconds]);

  const handleTimeUp = useCallback(onTimeUp, [onTimeUp]);

  useEffect(() => {
    if (remaining <= 0) {
      handleTimeUp();
      return;
    }

    const interval = setInterval(() => {
      setRemaining((prev) => prev - 1);
    }, 1000);

    return () => clearInterval(interval);
  }, [remaining, handleTimeUp]);

  const minutes = Math.floor(remaining / 60);
  const secs = remaining % 60;
  const isLow = remaining <= 10;

  if (variant === "classmaker") {
    return (
      <div
        className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-mono ${
          isLow
            ? "bg-red-50 text-red-600 animate-pulse"
            : "bg-gray-100 text-gray-700"
        }`}
      >
        {label && <span className="text-xs text-gray-400">{label}</span>}
        <span>
          {String(minutes).padStart(2, "0")}:{String(secs).padStart(2, "0")}
        </span>
      </div>
    );
  }

  return (
    <div
      className={`flex items-center gap-2 px-3 py-1.5 rounded text-sm font-mono ${
        isLow
          ? "bg-red-500/30 text-red-200 animate-pulse"
          : "bg-white/15 text-white/90"
      }`}
    >
      {label && <span className="text-xs text-white/60">{label}</span>}
      <span>
        {String(minutes).padStart(2, "0")}:{String(secs).padStart(2, "0")}
      </span>
    </div>
  );
}