import React from 'react'
import { Route } from 'react-router'

import { PAGES } from 'config'

import { Background } from 'features/Background'
import { Logo } from 'features/Logo'
import { CenterBlock } from 'features/Login/styled'

import { RegistrationStep } from './components/RegistrationStep'
import { CardStep } from './components/CardStep'
import { SubscriptionStep } from './components/SubscriptionsStep'

export const Register = () => (
  <Background>
    <CenterBlock>
      <Logo />
      <Route exact path={`${PAGES.register}`}>
        <RegistrationStep />
      </Route>
      <Route exact path={`${PAGES.register}/card`}>
        <CardStep />
      </Route>
      <Route exact path={`${PAGES.register}/subscriptions`}>
        <SubscriptionStep />
      </Route>
    </CenterBlock>
  </Background>
)