import styles from "@/components/administrator/form/form.module.css";

/**
 * A generic text area component with a label and error message.
 * @type {React.FC<React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
 *   label: string;
 *   icon?: React.ReactNode;
 *   error?: {
 *     status: boolean;
 *     message: string;
 *   };
 *   ref?: React.Ref<HTMLTextAreaElement>;
 *   onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
 *   onInput?: React.ChangeEventHandler<HTMLTextAreaElement>;
 *   name?: string;
 *   placeholder?: string;
 *   defaultValue?: string | number | readonly string[];
 *   value?: string | number | readonly string[];
 * }>}
 */
const TextArea = (props) => {
  return (
    <div className={styles.input_container}>
      <p className={`${styles.label} ${props?.labelclassname}`}>
        {props.label}
      </p>
      <div
        className={`${styles.wrapper} ${
          props?.error?.status ? styles.error : ""
        } ${props.className}`}>
        {props.icon && <>{props.icon}</>}
        <textarea
          ref={props?.ref}
          className={styles.textarea}
          onChange={(e) => {
            if (props.onChange) props.onChange(e);
          }}
          onInput={(e) => {
            if (props.onInput) props.onInput(e);
          }}
          name={props.name}
          placeholder={props.placeholder}
          spellCheck="false"
          defaultValue={props?.defaultValue}
          value={props?.value}></textarea>
      </div>
      {props?.error?.status && props?.error?.message && (
        <p className={styles.error_message}>{props?.error?.message}</p>
      )}
    </div>
  );
};

export default TextArea;
