import React from 'react'
import './index.scss'

interface Props {
    fieldName: string
    placeholder: string
    value?: string
    error: string
    onBlur?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
}

const TextFieldset = React.forwardRef<HTMLTextAreaElement, Props>(function fieldSet(props, ref) {
    return (
        <fieldset className="Fieldset">
            <textarea
                className="Input" 
                name={props.fieldName} 
                placeholder={props.placeholder}
                defaultValue={props.value || ''}
                onBlur={props.onBlur}
                onChange={props.onChange}
                ref={ref}
            />
            {
                props.error.length > 0 && 
                <p className='InputError'>{props.error}</p>
            }
        </fieldset>
    )
})

export default TextFieldset