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

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

const Fieldset = React.forwardRef<HTMLInputElement, Props>(function fieldSet(props, ref) {
    const fieldType = (['password', 'confirm_password'].includes(props.fieldName)) ? 'password' : 'text'
    
    return (
        <fieldset className="Fieldset">
            <input
                autoComplete="off"
                className="Input" 
                type={fieldType}
                name={props.fieldName} 
                placeholder={props.placeholder}
                defaultValue={props.value || ''}
                onBlur={props.onBlur}
                onChange={props.onChange}
                ref={ref}
                formNoValidate
            />
            {
                props.error.length > 0 && 
                <p className='InputError'>{props.error}</p>
            }
        </fieldset>
    )
})

export default Fieldset