"use client";
import * as React from "react";
import { highlightSegments } from "@/lib/search/query";
import { cn } from "@/lib/utils";

/** Renders `text` with `<mark>` around every occurrence of `terms` (case-insensitive). */
export function Highlight({ text, terms, className, markClassName }: { text: string; terms: string[]; className?: string; markClassName?: string }) {
  const segments = React.useMemo(() => highlightSegments(text, terms), [text, terms]);
  return (
    <span className={className}>
      {segments.map((s, i) =>
        s.hit ? (
          <mark key={i} className={cn("rounded-[3px] bg-accent-soft px-0.5 text-fg [.dark_&]:bg-accent/30", markClassName)}>
            {s.text}
          </mark>
        ) : (
          <React.Fragment key={i}>{s.text}</React.Fragment>
        ),
      )}
    </span>
  );
}