import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Blockquote from '@tiptap/extension-blockquote';
import Link from '@tiptap/extension-link';
import { CustomImage } from './CustomImageExtension';
import TextAlign from "@tiptap/extension-text-align";
import Highlight from "@tiptap/extension-highlight";


interface ArticleContentProps {
  content: string;
}

// Показ контента статьи в редакторе, в режиме "только чтение"
export function ArticleContent({ content }: ArticleContentProps) {
  const editor = useEditor({
    extensions: [
      StarterKit.configure({
        blockquote: false, // Отключаем дефолтный
      }),
      Blockquote.configure({
        HTMLAttributes: {
          class: 'border-l-4 border-gray-300 pl-4 italic',
        },
      }),
      TextAlign.configure({
        types: ['heading', 'paragraph'],
      }),
      CustomImage,
      Highlight,
      Link.configure({                      // Добавляем расширение Link
        openOnClick: false,                 // Отключаем автоматическое открытие ссылок при клике (удобно для редактирования)
        HTMLAttributes: {
          class: 'text-blue-500 underline', // Стили для ссылок
          target: '_blank',                 // Открывать в новой вкладке
          rel: 'noopener noreferrer',       // Безопасность
        },
      }),
    ],
    content,
    editable: false, // Контент только для чтения
  });

  return (
      <div className="prose prose-lg max-w-none mb-8">
        <EditorContent editor={editor} />
      </div>
  );
}
