import { memo } from 'react';
import { parseMentions } from './parser';
import { MentionChip } from './mention-chip';
import type { MentionData } from './parser';

interface Props {
  content: string;
  className?: string;
  onMentionClick?: (mention: MentionData) => void;
}

/**
 * Renders message content with inline mention chips.
 * Text segments render as plain text; mentions render as clickable chips.
 */
export const MentionRenderer = memo(function MentionRenderer({
  content,
  className,
  onMentionClick,
}: Props) {
  const segments = parseMentions(content);

  return (
    <span className={className}>
      {segments.map((seg, i) => {
        if (seg.type === 'mention' && seg.mention) {
          return (
            <MentionChip
              key={`${seg.mention.entityId}-${i}`}
              entityType={seg.mention.entityType}
              entityId={seg.mention.entityId}
              entityLabel={seg.mention.entityLabel}
              onClick={onMentionClick}
            />
          );
        }
        return <span key={i}>{seg.content}</span>;
      })}
    </span>
  );
});
