import React from 'react';
import ReactDOM from 'react-dom';
import { Form, FormLegend, FormLabel, Input } from 'furl-components';

ReactDOM.render(
 <div>
  <Form>
    <FormLegend>Signup form</FormLegend>
    <FormLabel htmlFor='username'>Username</FormLabel>
    <Input id='username' placeholder='Enter your username...' />
    <FormLabel htmlFor='pwd'>Password</FormLabel>
    <Input type='password' id='pwd' placeholder='Enter your password...' />
    <FormLabel htmlFor='pwd-repeat'>Repeat Password</FormLabel>
    <Input type='password' id='pwd-repeat' placeholder='Repeat your password...' />
    <FormLabel htmlFor='email'>E-mail</FormLabel>
    <Input type='email' id='email' placeholder='mail@server.com' />
  </Form>
  <Form
    twoColumn
    legend='Signup form'
    data={[
      {
        name: 'username',
        label: 'Username'
      },
      {
        type: 'password',
        name: 'password',
        placeholder: '',
        label: 'Password'
      },
      {
        type: 'password',
        name: 'repeat',
        placeholder: '',
        label: 'Repeat password'
      },
      {
        type: 'email',
        name: 'email',
        label: 'E-mail',
        placeholder: 'mail@server.com'
      }
    ]}
  />
 </div>, 
  document.getElementById('root')
);