import React, { useState, useEffect } from 'react';

const REFRESH_INTERVAL = 300; // seconds

export default function UpdateTimer({ onRefresh }) {
  const [secondsLeft, setSecondsLeft] = useState(REFRESH_INTERVAL);

  useEffect(() => {
    const interval = setInterval(() => {
      setSecondsLeft((prev) => {
        if (prev > 1) {
          return prev - 1;
        } else {
          if (typeof onRefresh === 'function') onRefresh();
          return REFRESH_INTERVAL;
        }
      });
    }, 1000);
    return () => clearInterval(interval);
  }, [onRefresh]);

  const percent = (secondsLeft / REFRESH_INTERVAL) * 100;
  const coverPercent = 100 - percent;

  return (
    <div className="w-full flex flex-col items-center mt-2 mb-2 max-w-5xl mx-auto">
      <div className="flex justify-center items-center mb-0.5 w-full">
        <span className="text-base font-semibold text-gray-300 dark:text-gray-200 text-center w-full">Next update in {secondsLeft}s</span>
      </div>
      <div
        className="w-full h-3 rounded bg-gray-300 dark:bg-gray-700 overflow-hidden relative"
        style={{
          background: 'linear-gradient(90deg, #22c55e 0%, #eab308 60%, #ef4444 100%)',
        }}
      >
        <div
          className="h-3 bg-gray-300 dark:bg-gray-700 absolute top-0 right-0 transition-all duration-300"
          style={{ width: `${coverPercent}%` }}
        ></div>
      </div>
    </div>
  );
} 