import React, { Fragment } from 'react'

import { ButtonSolid } from 'features/Common/Button'
import { ArrowLeft, ArrowRight } from 'features/Common/Arrows'
import { ButtonsBlock } from 'features/Login/styled'
import { MainSubscription } from 'features/Register/components/MainSubscription'
import { AdditionalSubscription } from 'features/Register/components/AdditionalSubscription'

import {
  SubscriptionsBlock,
  AdditionalBlockTitle,
  BlockTitle,
  SubscriptionList,
  SubscriptionListItem,
  PricesBlock,
  TotalInfoBlock,
  TotalInfoText,
  TotalPriceAmmount,
  TotalPriceDetails,
} from './styled'

export const SubscriptionStep = () => (
  <Fragment>
    <SubscriptionsBlock>
      <BlockTitle>Выбор подписки</BlockTitle>
      <SubscriptionList>
        <SubscriptionListItem>
          <MainSubscription title='Бесплатная' price={0} />
        </SubscriptionListItem>
        <SubscriptionListItem>
          <MainSubscription title='Базовая' price={1999} />
        </SubscriptionListItem>
      </SubscriptionList>
    </SubscriptionsBlock>
    <SubscriptionsBlock forAdditionalTitle>
      <AdditionalBlockTitle>Дополнительно</AdditionalBlockTitle>
      <PricesBlock>
        <ArrowLeft />
        <AdditionalSubscription title='Российская премьер-лига' price={1999} />
        <AdditionalSubscription title='Primera División' price={1999} />
        <AdditionalSubscription title='Manchester United' price={999} />
        <AdditionalSubscription title='Василий Березуцкий' price={299} />
        <ArrowRight />
      </PricesBlock>
    </SubscriptionsBlock>
    <ButtonsBlock forSubsPage>
      <ButtonSolid>Готово</ButtonSolid>
      <TotalInfoBlock>
        <TotalInfoText>Базовая + 2 дополнительно за
          <TotalPriceAmmount>6997</TotalPriceAmmount>
          <TotalPriceDetails>₽ / МЕС</TotalPriceDetails>
        </TotalInfoText>
      </TotalInfoBlock>
    </ButtonsBlock>
  </Fragment>
)