"use client";

import { LiveDot } from "@/components/live-dot";
import { formatShortTime } from "@/lib/format";
import { useUtcClock } from "@/lib/hooks/use-utc-clock";
import { useStream } from "@/lib/ws/use-stream";

export function StatusBar() {
  const { connected, ready, lastEvent } = useStream();
  const clock = useUtcClock();

  return (
    <div className="statusBar">
      <div className="statusLeft">
        <LiveDot connected={connected} ready={ready} />
        <span>{connected ? "STREAM LIVE" : ready ? "STREAM DOWN" : "CONNECTING"}</span>
      </div>
      <div className="statusCenter">
        {lastEvent
          ? `${lastEvent.event} · ${formatShortTime(lastEvent.emitted_at)}`
          : "Waiting for events"}
      </div>
      <div className="statusRight">
        <span>{clock}</span>
        <span className="kbdHint">
          <kbd>⌘</kbd><kbd>K</kbd>
        </span>
      </div>
    </div>
  );
}
