import React from "react";
import { TextareaWithLabelWrapper } from "./styled";

export interface ITextareaWithLabel {
  label: string;
  value?: any;
  placeholder?: string | undefined;
  disabled?: boolean | undefined;
  rows?: number;
  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
}

const TextareaWithLabel: React.FC<ITextareaWithLabel> = ({
  label,
  value,
  placeholder,
  disabled,
  onChange,
  rows,
}) => {
  return (
    <TextareaWithLabelWrapper>
      <label htmlFor={label}>{label}</label>
      <textarea
        className="textbox"
        id={label}
        role="textbox"
        onChange={onChange}
        value={value}
        placeholder={placeholder}
        disabled={disabled}
        rows={rows ? rows : 4}
      ></textarea>
    </TextareaWithLabelWrapper>
  );
};

export default TextareaWithLabel;
