import React, {forwardRef} from 'react';

import {TextareaStyle as S} from './text-area.style';
import {ITextarea} from './text-area.type';
import {RedStarComponent} from '../../atoms/red-star';

/**
 * @version 0.0.2
 * @author Ali M. Sadeghi
 * @lastUpdate change the color of placeholder, made it lighter.
 */
export const TextareaComponent = forwardRef<HTMLTextAreaElement, ITextarea>(
    (
        {label, id, helperText, containerClassName, error, mandatory, ...rest},
        ref,
    ) => {
        return (
            <S.Container className={containerClassName}>
                <S.Header>
                    {mandatory && <RedStarComponent />}
                    {label && <S.Label htmlFor={id}>{label}</S.Label>}
                </S.Header>
                <S.Textarea
                    dir='auto'
                    error={error}
                    id={id}
                    ref={ref}
                    {...rest}
                />
                {helperText && (
                    <S.HelperText error={error}>{helperText}</S.HelperText>
                )}
            </S.Container>
        );
    },
);

TextareaComponent.displayName = 'TextareaComponent';