import { Fragment, ReactNode } from 'react';
import type { JSONContent } from '@tiptap/react';
import { NodeType } from '@/config/enums/tip-tap';

export default function renderInline(content?: JSONContent[]) {
  if (!content) return null;

  return content.map((node, index) => {
    if (node.type === NodeType.TEXT) {
      let text: ReactNode = node.text;

      node.marks?.forEach((mark) => {
        switch (mark.type) {
          case 'textStyle':
            text = (
              <span
                style={{ color: mark.attrs?.color }}
                className={mark.attrs?.class}
              >
                {text}
              </span>
            );

            break;

          case 'bold':
            text = <strong className='font-semibold'>{text}</strong>;
            break;

          case 'italic':
            text = <em className='italic'>{text}</em>;
            break;

          case 'strike':
            text = <s className='line-through'>{text}</s>;
            break;

          case 'code':
            text = (
              <code className='rounded bg-neutral-100 px-1 font-mono text-[0.85em]'>
                {text}
              </code>
            );
            break;

          case 'link':
            text = (
              <a
                href={mark.attrs?.href}
                target={mark.attrs?.target || '_blank'}
                rel='noopener noreferrer'
                className='text-client-red underline-offset-2 hover:underline'
              >
                {text}
              </a>
            );
            break;
        }
      });

      return <Fragment key={index}>{text}</Fragment>;
    }

    if (node.type === NodeType.HARD_BREAK) {
      return <br key={index} />;
    }

    return null;
  });
}