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 {
  GeneralDataStep,
  CardStep,
  SubscriptionStep,
} from './Steps'

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