import { jsx as _jsx } from "react/jsx-runtime";
import { cn } from "@powerhousedao/design-system/scalars";
import { diffSentences, diffWords } from "diff";
import { useMemo } from "react";
export const TextDiff = ({ baseValue, value, viewMode, diffMode = "words", className, childrenClassName, }) => {
    const wordsDiff = useMemo(() => {
        return diffMode === "words"
            ? diffWords(baseValue ?? "", value)
            : diffSentences(baseValue ?? "", value);
    }, [baseValue, value, diffMode]);
    const hasChanges = useMemo(() => {
        return wordsDiff.some((word) => word.added || word.removed);
    }, [wordsDiff]);
    const bgColor = diffMode === "sentences" && hasChanges
        ? viewMode === "addition"
            ? "bg-green-600/30"
            : viewMode === "removal"
                ? "bg-red-600/30"
                : undefined
        : undefined;
    return (_jsx("span", { className: cn("leading-[18px] text-gray-700", bgColor, className), children: wordsDiff.map((word, index) => {
            return word.added ? (viewMode === "addition" || viewMode === "mixed" ? (_jsx("span", { className: cn((diffMode === "words" || viewMode === "mixed") &&
                    "bg-green-600/30", childrenClassName), children: word.value }, `${word.value}-${index}`)) : null) : word.removed ? (viewMode === "removal" || viewMode === "mixed" ? (_jsx("span", { className: cn((diffMode === "words" || viewMode === "mixed") &&
                    "bg-red-600/30", childrenClassName), children: word.value }, `${word.value}-${index}`)) : null) : (_jsx("span", { className: cn(childrenClassName), children: word.value }, `${word.value}-${index}`));
        }) }));
};
//# sourceMappingURL=text-diff.js.map