import { useEffect, useState } from "react";
import { listen } from "@tauri-apps/api/event";
import type { RecordingState } from "./types";

export default function Overlay() {
  const [state, setState] = useState<RecordingState>("recording");

  useEffect(() => {
    document.documentElement.classList.add("overlay-mode");
    const unlisten = listen<{ state: RecordingState }>("recording-state", (e) => {
      setState(e.payload.state);
    });
    return () => {
      unlisten.then((fn) => fn());
    };
  }, []);

  return (
    <div className={`overlay-pill overlay-${state}`}>
      <span className="overlay-dot" />
      <span className="overlay-label">
        {state === "recording" ? "listening" : state === "processing" ? "transcribing" : "idle"}
      </span>
      <span className="overlay-bars" aria-hidden>
        <i /><i /><i /><i /><i />
      </span>
    </div>
  );
}