'use client';

import { isEmojiId } from '@/lib/emoji-catalog';
import { emojiIdToNative, resolveNativeEmojiContent } from '@/lib/emoji-native-map';

export function ChatEmojiContent({ content, size = 22 }: { content?: string | null; size?: number }) {
  if (!content) return null;

  if (isEmojiId(content)) {
    const native = emojiIdToNative(content);
    if (native) {
      return (
        <span
          className="text-[length:var(--emoji-size)] leading-none"
          style={{ ['--emoji-size' as string]: `${size + 8}px` }}
        >
          {native}
        </span>
      );
    }
  }

  if (/:([a-z0-9-]+):/.test(content)) {
    return <span className="whitespace-pre-wrap break-words">{resolveNativeEmojiContent(content)}</span>;
  }

  return <span className="whitespace-pre-wrap break-words">{content}</span>;
}