app/components/TextInput.tsx

'use client';

import React from "react";

interface TextInputProps {
  input: string;
  setInput: (v: string) => void;
  classify: (input: string) => void;
  ready: boolean | null;
}

export const TextInput = ({ input, setInput, classify, ready }: TextInputProps) => {
  return (
    <div className="h-full flex flex-col">
      <label htmlFor="input-text" className="block text-gray-600 mb-2 text-sm font-medium">
        Enter your text
      </label>
      <textarea
        id="input-text"
        className="flex-1 w-full p-4 rounded-lg bg-gray-50 border border-gray-200 text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-300 transition-all duration-300 resize-none"
        placeholder="Type something to analyze sentiment..."
        value={input}
        disabled={ready === false}
        onChange={e => {
          setInput(e.target.value);
          if (e.target.value.trim() !== '') {
            classify(e.target.value);
          }
        }}
      />
    </div>
  );
};