/**
 * MentionText - Renders text with @{name} mentions highlighted
 *
 * Converts @{name} patterns to styled spans for visual distinction.
 */
function MentionText({ text, className = '' }) {
    if (!text) return null;

    // Pattern to match @{name}
    const mentionRegex = /@\{([^}]+)\}/g;

    // Split text and highlight mentions
    const parts = [];
    let lastIndex = 0;
    let match;

    // Reset regex lastIndex
    mentionRegex.lastIndex = 0;

    while ((match = mentionRegex.exec(text)) !== null) {
        // Add text before mention
        if (match.index > lastIndex) {
            parts.push({
                type: 'text',
                content: text.substring(lastIndex, match.index),
                key: `text-${lastIndex}`,
            });
        }

        // Add mention
        parts.push({
            type: 'mention',
            content: match[1], // The name inside @{...}
            key: `mention-${match.index}`,
        });

        lastIndex = match.index + match[0].length;
    }

    // Add remaining text
    if (lastIndex < text.length) {
        parts.push({
            type: 'text',
            content: text.substring(lastIndex),
            key: `text-${lastIndex}`,
        });
    }

    // If no mentions found, return plain text
    if (parts.length === 0) {
        return React.createElement('span', { className }, text);
    }

    return React.createElement(
        'span',
        { className },
        parts.map((part) => {
            if (part.type === 'mention') {
                return React.createElement(
                    'strong',
                    {
                        key: part.key,
                        className: 'text-brand-600',
                        title: `Menzione: ${part.content}`,
                    },
                    `@${part.content}`
                );
            }
            return React.createElement('span', { key: part.key }, part.content);
        })
    );
}

window.MentionText = MentionText;