import React, { Fragment } from 'react';
import { Field, FormSection } from 'redux-form';

// Material Components
import { Typography } from '@material-ui/core';
import TextInput from '../../../TextInput/TextInput';

const NextOfKinFormFields = () => (
  <Fragment>
    <Typography
      variant="caption"
      color="inherit"
    >
      <br />
          Next of Kin
    </Typography>
    <FormSection name="contacts.0">
      <FormSection name="name">
        <Field
          name="firstname"
          type="text"
          label="First name"
          fullWidth
          component={TextInput}
        />

        <Field
          name="lastname"
          type="text"
          label="Last Name"
          fullWidth
          component={TextInput}
        />

        <Field
          name="middlename"
          type="text"
          label="Other names"
          fullWidth
          component={TextInput}
        />

      </FormSection>

      <FormSection name="contactPoints">
        <Field
          name="phone"
          type="text"
          label="Phone number"
          fullWidth
          component={TextInput}
        />

        <Field
          name="email"
          type="email"
          label="E-mail"
          fullWidth
          component={TextInput}
        />
      </FormSection>
    </FormSection>
  </Fragment>
);

export default NextOfKinFormFields;