sexy/components/layout/ConnectionStatus.tsx

"use client";

import { useButtplugStore } from "@/lib/buttplug/store";
import { cn } from "@/lib/utils";

export function ConnectionStatus() {
  const connected = useButtplugStore((s) => s.connected);
  const deviceCount = useButtplugStore((s) => Object.keys(s.devices).length);

  return (
    <div className="flex items-center gap-2 rounded-md border border-border bg-card/60 px-3 py-1 text-xs">
      <span className={cn("bp-led", connected && "bp-pulse")} data-on={connected} aria-hidden />
      <span className="bp-readout text-muted-foreground">
        {connected ? `${deviceCount} device${deviceCount === 1 ? "" : "s"} connected` : "not connected"}
      </span>
    </div>
  );
}