import React from "react";
import cx from 'classnames';
import "./style.scss"
import { TextAreaProps } from "./TextArea.types"

export const TextArea: React.FC<TextAreaProps> = ({
    id = "TempTextAreaID",
    name = "TempNameTextArea",
    label = "",
    style = {},
    value = "",
    minLength = 0,
    maxLength = 1000,
    placeholder = "",
    isReadOnly = false,
    isDisabled = false,
    className = "",
    onChange,
}) => {
  return (
    <div className="gtc-rc-textarea-wrapper">
        {label && 
            <div className="gtc-rc-textarea-label">
                <label htmlFor={id}>{label}</label>
            </div>
        }
        <div className={"gtc-rc-textarea-input"}>
            <textarea 
                className={cx("gtc-rc-textarea-textarea", !isDisabled && "gtc-rc-textarea-textarea-normal", className)}
                id={id} 
                name={name} 
                readOnly={isReadOnly}
                placeholder={placeholder}
                style={style} 
                onChange={(e) => {
                    onChange && onChange(e.target.value)
                }} 
                disabled={isDisabled}
                value={value}
                minLength={minLength}
                maxLength={maxLength}
                //spellCheck={true}
            />
        </div>
    </div>
  );
};
