import React, { Fragment } from 'react'

import { ButtonSolid } from 'features/Common'
import { ButtonsBlock } from 'features/Login/styled'

import { Subscription } from './Subscription'
import {
  SubscriptionsBlock,
  AdditionalBlockTitle,
  BlockTitle,
  SubscriptionList,
  SubscriptionListItem,
} from './styled'

export const SubscriptionStep = () => (
  <Fragment>
    <SubscriptionsBlock>
      <BlockTitle>Выбор подписки</BlockTitle>
      <SubscriptionList>
        <SubscriptionListItem>
          <Subscription />
        </SubscriptionListItem>
        <SubscriptionListItem>
          <Subscription />
        </SubscriptionListItem>
      </SubscriptionList>
    </SubscriptionsBlock>

    <SubscriptionsBlock>
      <AdditionalBlockTitle>Дополнительно</AdditionalBlockTitle>

    </SubscriptionsBlock>
    <ButtonsBlock>
      <ButtonSolid>Готово</ButtonSolid>
    </ButtonsBlock>
  </Fragment>
)