import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Blockquote from '@tiptap/extension-blockquote';
import Image from "@tiptap/extension-image";

interface ArticleContentProps {
  content: string;
}

const ResizableImage = Image.extend({
  addAttributes() {
    return {
      ...this.parent?.(),
      src: {
        default: null,
      },
      alt: {
        default: null,
      },
      title: {
        default: null,
      },
      class: {
        default: 'max-w-full h-auto',  // Добавлено для адаптивности
      },
      width: {
        default: 'auto',
        parseHTML: (element) => element.getAttribute('width') || 'auto',
        renderHTML: (attributes) => ({
          width: attributes.width,
        }),
      },
      height: {
        default: 'auto',
        parseHTML: (element) => element.getAttribute('height') || 'auto',
        renderHTML: (attributes) => ({
          height: attributes.height,
        }),
      },
    };
  },
});

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',
        },
      }),
      ResizableImage
    ],
    content,
    editable: false, // Контент только для чтения
  });

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