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

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

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

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

  const {
    height = "90vh",
    width = "100%",
    theme = "vs-dark",
    language = "typescript",
    onChange = handleEditorChange,
  } = props;

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

export default Editor;