import CodeMirror from '@uiw/react-codemirror'
import { javascript } from '@codemirror/lang-javascript'
import { useState } from 'react'

interface CodeEditorProps {
  initialValue?: string
  onChange?: (value: string) => void
}

export function CodeEditor({ initialValue = '', onChange }: CodeEditorProps) {
  const [value, setValue] = useState(initialValue)

  const handleChange = (val: string) => {
    setValue(val)
    onChange?.(val)
  }

  return (
    <CodeMirror
      value={value}
      height="500px"
      extensions={[javascript()]}
      onChange={handleChange}
      theme="dark"
    />
  )
}