"use client";

import { useUiStore } from "@/stores/ui";

import { cn } from "@/lib/utils";

const MAP = {

  open: { label: "Live", color: "var(--color-accent-green)", live: true },

  connecting: { label: "Connecting", color: "var(--color-accent-amber)", live: false },

  closed: { label: "Offline", color: "var(--color-accent-red)", live: false },

} as const;

export function ConnectionStatus({ compact = false }: { compact?: boolean }) {

  const status = useUiStore((s) => s.streamStatus);

  const m = MAP[status];

  return (

    <span

      className={cn(

        "inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-xs font-medium tabular",

        compact && "px-2 py-0.5",

      )}

      style={{

        color: m.color,

        borderColor: `color-mix(in oklch, ${m.color} 30%, transparent)`,

        backgroundColor: `color-mix(in oklch, ${m.color} 10%, transparent)`,

      }}

      role="status"

      aria-live="polite"

    >

      <span

        className={cn("h-1.5 w-1.5 rounded-full", m.live && "pulse-ring")}

        style={{ backgroundColor: m.color }}

        aria-hidden

      />

      {m.label}

    </span>

  );

}