import FieldWarning from '@/components/common/FieldWarning'
import FormField from '@/components/common/FormField'
import { inputClass } from '@/lib/utils'

import type { FC, ReactNode } from 'react'

type Props = {
  label:        string
  value:        string
  onChange:     (value: string) => void
  warnings?:    string[]
  errors?:      string[]
  disabled?:    boolean
  type?:        string
  placeholder?: string
  className?:   string
  after?:       ReactNode
  onBlur?:      () => void }


const PostTextField: FC<Props> = (
    { label,
      value,
      onChange,
      warnings,
      errors,
      disabled,
      type = 'text',
      placeholder,
      className,
      after,
      onBlur },
) => (
    <FormField label={label} messages={errors}>
      {({ describedBy, invalid }) => (
          <>
            <input
                type={type}
                value={value}
                disabled={disabled}
                placeholder={placeholder}
                onBlur={onBlur}
                onChange={ev => onChange (ev.target.value)}
                aria-describedby={describedBy}
                aria-invalid={invalid}
                className={inputClass (invalid, className)}/>
            <FieldWarning messages={warnings}/>
            {after}
          </>)}
    </FormField>)

export default PostTextField