const defaultProps = {
  page: 'design-system',
};

const userProp = {
  user: {
    data: {
      name: 'Tom Tom',
      email: 'tom@example.com',
      avatarSmallUrl: 'https://6a5edc300520d4037dd6-0732807511066685711db213ddc1d2df.ssl.cf2.rackcdn.com/snw8ceng29ch3zbs4pvro3t2jxswf8yk',
      accessToken: 'abc123',
    },
    loading: false,
    isEligibleForFreeTrial: true,
  }
};

const userHandlerProps = {
  onClickLogin: () => { alert('Log in clicked'); },
  onClickLogout: () => { alert('Log out clicked'); },
  onClickSignup: () => { alert('Sign up clicked'); },
};

const createHandlerProps = {
  onClickCreatePoll: () => { alert('Create poll clicked'); },
  onClickCreateOneOnOne: () => { alert('Create 1:1 clicked'); },
  onClickCreateSurvey: () => { alert('Create survey clicked'); },
};

<div>
  <p>Without a logged-in user:</p>
  <Navigation {...defaultProps} />

  <p>With a logged-in free user:</p>
  <Navigation {...defaultProps} {...userProp} />

  <p>With a logged-in subscribed user:</p>
  <Navigation
    {...defaultProps}
    user={{
      ...userProp.user,
      isEligibleForFreeTrial: false
    }}
  />

  <p>Logged out, without Create Poll menu:</p>
  <Navigation {...defaultProps} hideCreatePollMenu />

  <p>Logged in, without Create Poll menu:</p>
  <Navigation {...defaultProps} {...userProp} hideCreatePollMenu />

  <p>Logged out, with action handlers instead of links for user/create actions:</p>
  <Navigation {...defaultProps} {...userHandlerProps} {...createHandlerProps} />

  <p>Logged in, with action handlers instead of links for user/create actions:</p>
  <Navigation {...defaultProps} {...userProp} {...userHandlerProps} {...createHandlerProps} />

  <p>Logged out, white theme:</p>
  <Navigation {...defaultProps} theme="white"/>

  <p>Logged in, white theme:</p>
  <Navigation {...defaultProps} {...userProp} theme="white"/>

</div>