"use client";

import { UsersIcon } from "lucide-react";

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

export function EditorPresence({ guideId, section }: { guideId: string; section: string }) {
  const presence = useAdminPresence(guideId, section);
  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}
          {editor.sections.length ? ` - ${editor.sections.join(", ")}` : ""}
        </Badge>
      ))}
    </div>
  );
}