/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import React, {TextareaHTMLAttributes} from 'react';

import {Label} from 'components/label';

import {TextareaContainer, Textarea, HelperText} from './style';

interface ITextareaComponent extends TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string;
  labelColor?: string;
  labelIcon?: React.JSX.Element;
  labelClassName?: string;
  error?: boolean;
  helperText?: string;
  helperTextClassName?: string;
  width?: number | string; // TODO check after refactoring if it possible to restrict width
}

const TextareaComponent = ({
  label,
  labelColor,
  labelIcon,
  labelClassName,
  value,
  onChange,
  color,
  error,
  helperText,
  helperTextClassName,
  width
}: ITextareaComponent): React.JSX.Element => {
  return (
    <TextareaContainer width={width}>
      {!!label && <Label text={label} color={labelColor} icon={labelIcon} className={labelClassName} />}
      <Textarea value={value} onChange={onChange} color={color} rows={5} error={error} />
      {!!helperText && (
        <HelperText className={helperTextClassName} error={error}>
          {helperText}
        </HelperText>
      )}
    </TextareaContainer>
  );
};

export default TextareaComponent;
