import React from 'react';
import { BrowserRouter, Link, Match, Miss } from 'react-router';

const Root = () => (
  <BrowserRouter>
    <div>
      <Link to="/auth">Auth</Link>
      <Link to="/adapters">Adapters</Link>
      <Link to="/users">Users</Link>
      <Match
        pattern="/auth"
        render={() => <div>auth</div>}
      />
      <Miss
        render={() => (
          <div className="app-layout">
            App Layout
            <Match
              pattern="/adapters"
              render={() => {
                console.log('render adapters');
                return <div>Adapters</div>;
              }}
            />
            <Match
              pattern="/users"
              render={() => {
                console.log('render users');
                return <div>Users</div>;
              }}
            />
          </div>
        )}
      />
    </div>
  </BrowserRouter>
);

export default Root;