"use client";

import * as monaco from "monaco-editor";
import Editor from "@monaco-editor/react";
import { loader } from "@monaco-editor/react";
import ThemeSelector from "./components/theme-selector";
import FontSizeSlider from "./components/font-size-slider";
import LanguageSelector from "./components/language-selector";
import { useCodeEditorStore } from "@/store/useCodeEditorStore";
import { highlightMonacoEditor } from "@/constants/editor/themes";

loader.config({ monaco });

export default function MainPage() {
  const { language, theme, fontSize, setEditor } = useCodeEditorStore();

  return (
    <div className="h-full flex flex-col gap-2">
      <div className="flex items-center px-4 gap-2">
        <LanguageSelector />
        <ThemeSelector />
        <FontSizeSlider />
      </div>
      <Editor
        language={language}
        theme={theme}
        beforeMount={highlightMonacoEditor}
        onMount={setEditor}
        options={{ fontSize, automaticLayout: true }}
      />
    </div>
  );
}
