import { createSignal, onMount, onCleanup } from 'solid-js';

export function FpsCounter() {
  const [fps, setFps] = createSignal(0);
  let frameCount = 0;
  let lastTime = 0;
  let rafId = 0;

  const tick = (now: number) => {
    frameCount++;
    if (now - lastTime >= 1000) {
      setFps(frameCount);
      frameCount = 0;
      lastTime = now;
    }
    rafId = requestAnimationFrame(tick);
  };

  onMount(() => {
    lastTime = performance.now();
    rafId = requestAnimationFrame(tick);
  });

  onCleanup(() => {
    cancelAnimationFrame(rafId);
  });

  return (
    <div class="fixed top-12 right-4 z-50 px-3 py-1.5 bg-surface/80 border border-primary/30 font-mono text-xs text-primary select-none pointer-events-none">
      {fps()} FPS
    </div>
  );
}