import { Fragment } from "react";
import { cn } from "@/lib/utils";
import { splitMentions } from "@/lib/mentions";

/**
 * Corpo di un messaggio di chat con le menzioni evidenziate.
 *
 * Sostituisce `{m.body}` dentro il paragrafo: mantiene `whitespace-pre-wrap` sul
 * genitore, quindi gli a capo continuano a funzionare senza dover spezzare il
 * testo in righe qui dentro.
 */
export function MentionText({
  body,
  candidates,
  mentionClassName,
}: {
  body: string;
  candidates: string[];
  /** Il contrasto cambia col fondo della bolla: lo decide chi la disegna. */
  mentionClassName?: string;
}) {
  const parts = splitMentions(body, candidates);

  return (
    <>
      {parts.map((part, i) =>
        part.type === "mention" ? (
          <span
            key={i}
            className={cn(
              "rounded px-1 font-semibold",
              mentionClassName ??
                "bg-primary/10 text-primary dark:bg-primary/20"
            )}
          >
            {part.value}
          </span>
        ) : (
          <Fragment key={i}>{part.value}</Fragment>
        )
      )}
    </>
  );
}