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>
  );
};