import React from 'react';
import { Label } from './Label';

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

export const TextArea: React.FC<TextAreaProps> = ({
  label,
  error,
  helperText,
  className = '',
  id,
  ...props
}) => {
  const textareaId = id || `textarea-${Date.now()}`;
  return (
    <div className="space-y-1">
      {label && (
        <Label htmlFor={textareaId}>
          {label}
        </Label>
      )}
      <textarea
        id={textareaId}
        className={`w-full px-3 py-2 text-sm border ${error ? 'border-red-500 focus:ring-red-500/10 focus:border-red-500' : 'border-slate-200 focus:ring-2 focus:ring-orange-500/10 focus:border-orange-500'
          } rounded-lg outline-none transition-all ${className}`}
        {...props}
      />
      {error && <p className="text-[11px] text-red-500 font-semibold">{error}</p>}
      {!error && helperText && <p className="text-[11px] text-slate-400">{helperText}</p>}
    </div>
  );
};