import { className } from 'lib/css'
import { FC, HTMLAttributes } from 'preact/compat'
import Error from './error'

type FormControlWrapperProps = {
  contentHint: string | null
  id: HTMLAttributes<HTMLInputElement>['id']
  labelText: string
  labelClass: string
  validity: boolean
  errorText: unknown
}

const FormControlWrapper: FC<FormControlWrapperProps> = ({
  contentHint,
  id,
  labelText,
  labelClass,
  validity,
  errorText,
  children,
}) => {
  return (
    <>
      {contentHint && (
        <span
          id={`${id}-content-hint`}
          className={className('input__content-hint')}
        >
          {contentHint}
        </span>
      )}

      <Error id={`${id}-error`} error={!validity && errorText} />

      <div className={className('form-control__wrapper')}>
        <label htmlFor={id} className={className(labelClass)}>
          {labelText}
        </label>
        {children}
      </div>
    </>
  )
}

export default FormControlWrapper