import { useState, useEffect } from "react";
import MonacoEditor, { OnChange } from "@monaco-editor/react";

interface EditorProps {
  height?: string;
  width?: string;
  theme?: string;
  language?: string;
  code?: string;
  onChange?: OnChange;
}

const Editor = (props: EditorProps) => {
  const [code, setCode] = useState<string>(
    props.code || 'console.log("Hello, Monaco!");'
  );

  const handleEditorChange: OnChange = (value) => {
    setCode(value || "");
  };

  const {
    height = "90vh",
    width = "100%",
    theme = "vs-dark",
    language = "typescript",
    code: _code = code, // z props, jeśli jest dostępne
    onChange = handleEditorChange,
  } = props;

  // Efekt do synchronizacji props.code z wewnętrznym stanem code
  useEffect(() => {
    if (_code !== undefined) {
      setCode(_code);
    }
  }, [_code]);

  return (
    <MonacoEditor
      height={height}
      width={width}
      language={language}
      theme={theme}
      value={code}
      onChange={onChange}
    />
  );
};

export default Editor;