'use client';

import dynamic from 'next/dynamic';
import type { SupportedLanguage } from '@/types';

const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {
  ssr: false,
  loading: () => (
    <div className="flex h-full w-full items-center justify-center bg-[#1e1e1e]">
      <div className="h-8 w-8 animate-spin rounded-full border-2 border-zinc-600 border-t-blue-400" />
    </div>
  ),
});

interface Props {
  language: SupportedLanguage;
  value: string;
  onChange: (value: string) => void;
  height?: string;
}

export default function CodeEditor({ language, value, onChange, height = '100%' }: Props) {
  const monacoLanguage = language === 'html' ? 'html' : 'python';

  return (
    <MonacoEditor
      height={height}
      language={monacoLanguage}
      value={value}
      theme="vs-dark"
      onChange={(val) => onChange(val ?? '')}
      options={{
        fontSize: 14,
        fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace",
        minimap: { enabled: false },
        scrollBeyondLastLine: false,
        padding: { top: 16, bottom: 16 },
        lineNumbersMinChars: 3,
        tabSize: 4,
        wordWrap: 'on',
        smoothScrolling: true,
        cursorSmoothCaretAnimation: 'on',
      }}
    />
  );
}