import React, { forwardRef } from 'react';

interface VNEditorProps {
  scriptText: string;
  onScriptChange: (text: string) => void;
}

export const VNEditor = forwardRef<HTMLTextAreaElement, VNEditorProps>(({ 
  scriptText, 
  onScriptChange 
}, ref) => {
  return (
    <div className="w-[40%] flex flex-col border-r border-gray-800">
      <div className="flex-1 relative font-mono text-sm leading-6">
        <textarea
          ref={ref}
          value={scriptText}
          onChange={e => onScriptChange(e.target.value)}
          spellCheck={false}
          className="absolute inset-0 w-full h-full bg-[#0d1117] p-6 pl-12 outline-none resize-none text-gray-400 caret-cyan-400 z-10 custom-scrollbar"
          style={{ 
            fontFamily: '"JetBrains Mono", "Fira Code", monospace',
            whiteSpace: 'pre',
            lineHeight: '24px'
          }}
        />
        <div className="absolute top-0 left-0 w-12 h-full bg-[#0b0e14] border-r border-gray-800 flex flex-col items-center py-6 text-[10px] text-gray-700 select-none z-0">
          {scriptText.split('\n').map((_, i) => (
            <div key={i} style={{ height: '24px' }}>{i + 1}</div>
          ))}
        </div>
      </div>
    </div>
  );
});

VNEditor.displayName = 'VNEditor';