// Hud.jsx — Stats HUD (Zustand)
import { useGameStore } from "../../store/useGameStore";
import { formatNumber } from "../../utils/formatNumber";

const formatTime = (time) => {
  const hours = Math.floor(time / 3600);
  const minutes = Math.floor((time % 3600) / 60);
  const secs = time % 60;
  return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
};

function Hud({ isVisible }) {
  const resources = useGameStore((s) => s.state.resources);
  const clickMultiplier = useGameStore((s) => s.state.clickMultiplier);
  const productionPerSecond = useGameStore((s) => s.productionPerSecond);
  const playSeconds = useGameStore((s) => s.playSeconds);

  if (isVisible) return null;

  return (
    <div className="fixed top-20 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2 px-6 py-3 rounded-xl bg-gray-900/90 backdrop-blur-sm text-white font-[var(--font)]">
      <div className="flex gap-6 text-sm">
        <div className="flex flex-col items-center">
          <span className="text-gray-400 text-xs">Temps</span>
          <span>{formatTime(playSeconds)}</span>
        </div>
        <div className="flex flex-col items-center">
          <span className="text-gray-400 text-xs">Têtards/s</span>
          <span>{formatNumber(productionPerSecond)}</span>
        </div>
        <div className="flex flex-col items-center">
          <span className="text-gray-400 text-xs">Ponte</span>
          <span>{clickMultiplier}</span>
        </div>
      </div>
      <div className="text-lg font-bold text-emerald-400">
        {formatNumber(resources)}
      </div>
    </div>
  );
}

export default Hud;