import React from 'react';

interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  label: string;
  helperText?: string;
}

export const TextArea: React.FC<TextAreaProps> = ({ label, helperText, className = '', ...props }) => {
  return (
    <div className="flex flex-col gap-1.5 h-full">
      <div className="flex justify-between items-baseline">
        <label className="block text-sm font-semibold text-gray-700">
          {label}
        </label>
        {helperText && (
          <span className="text-xs text-gray-500 italic">{helperText}</span>
        )}
      </div>
      <textarea
        className={`flex-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-3 border resize-none font-mono bg-white text-gray-800 ${className}`}
        {...props}
      />
    </div>
  );
};