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