import Editor, { type OnValidate } from "@monaco-editor/react";
import { useState } from "react";

import type { MockFileNode } from "@/pages/workspace/mock-data";

interface EditorPanelProps {
  file?: MockFileNode;
}

export function EditorPanel({ file }: EditorPanelProps) {
  const [, setMarkers] = useState<Parameters<OnValidate>[0]>([]);

  if (!file || file.kind !== "file") {
    return (
      <section className="flex h-full w-full items-center justify-center bg-background text-sm text-muted-foreground">
        <div className="text-center">
          <p>No file selected</p>
        </div>
      </section>
    );
  }

  return (
    <section className="h-full w-full overflow-hidden bg-background">
      <Editor
        key={file.path}
        theme="vs-dark"
        language={file.language ?? "typescript"}
        value={file.content ?? ""}
        onValidate={setMarkers}
        options={{
          automaticLayout: true,
          minimap: { enabled: false },
          readOnly: false,
        }}
      />
    </section>
  );
}