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

import { PAGES } from 'config'

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'
import { RegistrationSuccessful } from './components/RegistrationSuccessful'

export const Register = () => (
  <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>
    <Route exact path={`${PAGES.register}/successful`}>
      <RegistrationSuccessful />
    </Route>
  </CenterBlock>
)
