import {  useEffect } from 'react';
import { useCountdown } from '../Provider/CountdownProvider';

/**
 * 将秒数转换为"分钟秒"格式
 * @param totalSeconds 总秒数
 * @returns 格式化后的字符串，如"10分00秒"
 */
const formatTime = (totalSeconds: number): string => {
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  
  // 确保秒数显示为两位数
  const formattedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
  
  return `${minutes}分${formattedSeconds}秒`;
};

interface CountdownProps {

}

export default function Countdown({ }: CountdownProps) {
  const { countdown, setCountdown } = useCountdown();
  
  useEffect(() => {
    // 只有当秒数大于0时才启动倒计时
    if (countdown <= 0) return;
    
    const timer = setInterval(() => {
      setCountdown(countdown - 1)
    }, 1000);
    
    
    // 清理定时器
    return () => clearInterval(timer);
  }, [countdown]);
  
  return (
    <div className="w-max h-[23px] rounded-full bg-[#EAF0FE] flex items-center ml-auto px-[10px] py-[3px] mb-[5px]">
      <div className="w-[6px] h-[6px] rounded-full bg-[#1580FF] mr-[5px]"></div>
      <div className="text-[12px] text-[#000]">剩余可用：{formatTime(countdown)}</div>
    </div>
  );
}