"use client";

import { useTranslation } from "@/components/i18n/locale-provider";
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 { t } = useTranslation();
  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" />
        {t("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>
  );
}