import React from 'react';

interface ProrankTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
  value?: string;
  onChange?: (value: string) => void;
  label?: string;
  help?: string;
  className?: string;
}

const ProrankTextarea: React.FC<ProrankTextareaProps> = ({
  value = '',
  onChange,
  label,
  help,
  className = '',
  ...props
}) => {
  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    if (onChange) {
      onChange(event.target.value);
    }
  };

  return (
    <div className={`prorank-form-group ${className}`.trim()}>
      {label && <label className="prorank-form-label">{label}</label>}
      {help && <p className="prorank-form-help">{help}</p>}
      <textarea
        className="prorank-textarea"
        value={value}
        onChange={handleChange}
        {...props}
      />
    </div>
  );
};

export { ProrankTextarea };
export default ProrankTextarea;