import { Send } from 'lucide-react';

export default function InputArea({ value, onChange, onSend, isProcessing }) {
  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      onSend();
    }
  };

  return (
    <div className="col-span-full bg-nexus-panel border-t border-nexus-border p-4 flex items-center gap-4 z-20">
      <div className="flex-1 relative bg-black/30 rounded-xl border border-nexus-border focus-within:border-nexus-primary focus-within:ring-2 focus-within:ring-blue-500/10 transition-all">
        <textarea
          value={value}
          onChange={(e) => onChange(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="Describe your task (e.g., 'Create a Python script to scrape weather data')..."
          className="w-full bg-transparent border-none text-nexus-main p-4 pr-12 font-sans text-sm resize-none h-[52px] outline-none placeholder:text-nexus-muted/50"
          disabled={isProcessing}
        />
      </div>
      <button
        onClick={onSend}
        disabled={isProcessing || !value.trim()}
        className="bg-nexus-primary hover:bg-nexus-glow text-white w-11 h-11 rounded-lg flex items-center justify-center transition-all disabled:opacity-50 disabled:cursor-not-allowed hover:scale-105 active:scale-95"
      >
        <Send size={18} />
      </button>
    </div>
  );
}