import Editor from "@monaco-editor/react";
import Tabs from "../tabs/tabs";
import { editor } from "monaco-editor";
import { RefObject } from "react";

export default function EditorPanel({
  html,
  setHtml,
  isAiWorking,
  setError,
  editorRef,
}: {
  html: string;
  setHtml: (h: string) => void;
  isAiWorking: boolean;
  setError: (e: boolean) => void;
  editorRef: RefObject<editor.IStandaloneCodeEditor | null>;
}) {
  return (
    <div className="h-full flex flex-col">
      <Tabs />
      <div className="flex-1">
        <Editor
          language="html"
          theme="vs-dark"
          value={html}
          onValidate={(markers) => setError(markers.length > 0)}
          onChange={(v) => setHtml(v ?? "")}
          onMount={(editor) => {
            if (editorRef) {
              editorRef.current = editor;
            }
          }}
          options={{
            readOnly: isAiWorking,
            minimap: { enabled: false },
            scrollBeyondLastLine: false,
          }}
          width="100%"
          height="100%"
        />
      </div>
    </div>
  );
}