"use client";

import { useSyncExternalStore } from "react";
import { marketStream } from "@/lib/stream";
import { cx } from "@/lib/format";

export function StreamIndicator({ className }: { className?: string }) {
  const state = useSyncExternalStore(
    (l) => marketStream().listenState(l),
    () => marketStream().state,
    () => "idle" as const,
  );
  const label = state === "open" ? "Stream live" : state === "connecting" || state === "reconnecting" ? "Connecting…" : "Stream idle";
  return (
    <span className={cx("items-center gap-1.5 px-2 text-[11px] text-ink-3", className)} title="Market Atlas WebSocket stream">
      <span className={cx("inline-block h-1.5 w-1.5 rounded-full", state === "open" ? "bg-positive live-dot" : state === "idle" || state === "closed" ? "bg-stale" : "bg-warning")} />
      {label}
    </span>
  );
}