import React from 'react';
import { FormFieldProps } from './types';
import {
  Field,
  Label,
  Required,
  Input,
  InputWrapper,
  ErrorIcon,
  ErrorText
} from './styles';
import { ErrorSvg } from './ErrorIcon';

export const FormField: React.FC<FormFieldProps> = ({
  isApp,
  id,
  label,
  required,
  type = 'text',
  value,
  field,
  error,
  updateField
}) => (
  <Field>
    <Label isApp={isApp} htmlFor={id}>
      {label} {required && <Required>*</Required>}
    </Label>
    <InputWrapper>
      <Input
        id={id}
        type={type}
        inputMode={type === 'tel' ? 'tel' : undefined}
        value={value}
        onChange={e => updateField(field, e.target.value)}
        onInput={e => updateField(field, (e.target as HTMLInputElement).value)}
        $hasError={!!error}
        isApp={isApp}
      />
      {error && (
        <ErrorIcon>
          <ErrorSvg />
        </ErrorIcon>
      )}
    </InputWrapper>
    {error && <ErrorText>{error}</ErrorText>}
  </Field>
);