import React from 'react'

import { Input } from 'features/Common'
import {
  BlockTitle,
  ButtonsBlock,
  Form,
} from 'features/Login/styled'

import {
  NextButton,
  Card,
  Row,
} from '../../styled'

export const CardStep = () => (
  <Form>
    <BlockTitle>Привязка карты</BlockTitle>

    <Card>
      <Input
        id='cardNumber'
        label='Номер карты'
        paddingX={21}
      />
      <Row>
        <Input
          id='expiration'
          label='Срок действия'
          wrapperWidth={280}
          inputWidth={85}
          paddingX={21}
        />
        <Input
          id='code'
          label='CVC / CVV'
          wrapperWidth={184}
          inputWidth={30}
          maxLength={3}
          paddingX={18.6}
        />
      </Row>
    </Card>
    <ButtonsBlock>
      <NextButton to='subscriptions'>Далее</NextButton>
    </ButtonsBlock>
  </Form>
)