import { formatUsd } from "@/lib/fx/format";
import { LEVERAGE } from "@/lib/fx/pairs";
import { accountSnapshot, useDesk } from "@/store/desk";

export function StatusBar() {
  useDesk((s) => s.balance);
  useDesk((s) => s.positions);
  useDesk((s) => s.market);
  const bot = useDesk((s) => s.bot);
  const snap = accountSnapshot();

  return (
    <footer className="flex h-8 shrink-0 items-center gap-4 overflow-x-auto border-t border-border px-3 text-2xs uppercase tracking-[0.12em] text-muted-foreground">
      <span>Simulated market · no broker routing</span>
      <span className="hidden sm:inline">Leverage {LEVERAGE}:1</span>
      <span className="hidden md:inline">
        Margin {snap.marginLevel == null ? "—" : `${snap.marginLevel.toFixed(0)}%`}
      </span>
      <span className="hidden md:inline">Used {formatUsd(snap.used, 0)}</span>
      <span className="ml-auto">
        {bot.enabled ? `Scanning ${bot.pairs.length} pairs` : "Manual desk"}
      </span>
    </footer>
  );
}