import React from 'react'
import { FieldError, Input, Label, TextField as ReactAriaTextField } from 'react-aria-components'

import './TextField.scss'

const TextField = ({ error, isRequired, label, ...forwardedProps }) => (
  <ReactAriaTextField
    {...forwardedProps}
    className={`form-field ${error ? 'form-field-invalid' : ''} ${isRequired ? 'form-field-required' : ''}`}
    isInvalid={error}
    isRequired={isRequired}
    validationBehavior="aria"
  >
    <Label className="form-field-label">{label}:</Label>
    <Input className="form-field-input" />
    <FieldError className="form-field-error">{error}</FieldError>
  </ReactAriaTextField>
)

export default TextField
