"use client";

import { motion } from "framer-motion";

interface TimerBarProps {
  timeRemaining: number;
  totalTime: number;
}

export function TimerBar({ timeRemaining, totalTime }: TimerBarProps) {
  const fraction = totalTime > 0 ? timeRemaining / totalTime : 0;
  const isUrgent = timeRemaining <= 5;

  return (
    <div className="w-full h-2.5 bg-white/10 rounded-full overflow-hidden">
      <motion.div
        className={`h-full rounded-full ${isUrgent ? "bg-red-500 glow-magenta" : "bg-gradient-to-r from-magenta to-cyan"}`}
        initial={false}
        animate={{ width: `${fraction * 100}%` }}
        transition={{ duration: 0.3 }}
      />
    </div>
  );
}