"use client";
import React from "react";
import { BlockNoteSchema, defaultBlockSpecs, PartialBlock } from "@blocknote/core";
import { useCreateBlockNote } from "@blocknote/react";
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useTheme } from "next-themes";

interface ViewerProps {
    initialContent?: string;
}

const schema = BlockNoteSchema.create({
    blockSpecs: {
      // Adds all default blocks.
      ...defaultBlockSpecs
    },
  });

const Viewer: React.FC<ViewerProps> = ({ initialContent }) => {
    const { theme } = useTheme()
    
    const editor = useCreateBlockNote({
        schema,
        initialContent: initialContent
            ? (JSON.parse(initialContent) as PartialBlock[])
            : undefined,
    });

    return (
        <div className="-mx-[54px] my-4">
            <BlockNoteView
                editor={editor}
                editable={false}
                onChange={() => {}}
                theme={theme as "light" | "dark"}
            />
        </div>
    );
};

export default Viewer;