"use client";

import { UsersIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { useAdminPresence } from "@/hooks/use-presence";

export function EditorPresence({ guideId }: { guideId: string }) {
  const presence = useAdminPresence(guideId);
  const editors = presence?.editorsByGuide[guideId] ?? [];
  return (
    <div className="flex flex-wrap items-center gap-1" aria-live="polite">
      <Badge variant="secondary">
        <UsersIcon data-icon="inline-start" />
        Editing {editors.length || (presence ? 0 : "—")}
      </Badge>
      {editors.map((editor) => (
        <Badge key={editor.userId} variant="outline">{editor.name}</Badge>
      ))}
    </div>
  );
}