import { useCallback, useEffect, useState } from 'react';
import { Square } from 'lucide-react';

export function ScreenRecordControlApp() {
  const [elapsed, setElapsed] = useState(0);

  // Timer
  useEffect(() => {
    const interval = setInterval(() => setElapsed((prev) => prev + 1), 1000);
    return () => clearInterval(interval);
  }, []);

  const minutes = Math.floor(elapsed / 60);
  const seconds = elapsed % 60;
  const display = `${minutes}:${seconds.toString().padStart(2, '0')}`;

  const handleStop = useCallback(() => {
    window.electronScreenRecord.stop();
  }, []);

  return (
    <div className="flex h-screen w-screen items-center justify-center gap-3 bg-zinc-900 px-4 py-3">
      <span className="h-2.5 w-2.5 animate-pulse rounded-full bg-red-500" />
      <span className="font-mono text-sm text-white/80">{display}</span>
      <button
        onClick={handleStop}
        className="flex items-center gap-1.5 rounded-md bg-red-600 px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-red-500"
      >
        <Square className="size-3 fill-current" />
        Stop
      </button>
    </div>
  );
}
