import {
  Field,
  Input,
  type FieldRootProps,
  type InputProps,
} from '@chakra-ui/react'
import type { ReactNode } from 'react'

export interface CalledItTextInputProps extends InputProps {
  label?: ReactNode
  helperText?: ReactNode
  errorText?: ReactNode
  fieldProps?: FieldRootProps
}

export function CalledItTextInput({
  label,
  helperText,
  errorText,
  fieldProps,
  ...props
}: CalledItTextInputProps) {
  return (
    <Field.Root invalid={Boolean(errorText)} {...fieldProps}>
      {label ? <Field.Label color="heading">{label}</Field.Label> : null}
      <Input borderColor="border" bg="white" {...props} />
      {helperText ? <Field.HelperText>{helperText}</Field.HelperText> : null}
      {errorText ? <Field.ErrorText>{errorText}</Field.ErrorText> : null}
    </Field.Root>
  )
}
