import React from 'react'

import { T9n } from 'features/T9n'
import { Input, ButtonSolid } from 'features/Common'
import {
  BlockTitle,
  ButtonsBlock,
  Form,
} from 'features/Login/styled'
import { useLexicsStore } from 'features/LexicsStore'

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

export const CardStep = () => {
  const { translate } = useLexicsStore()
  const defaultMessage = translate('please_fill_out_this_field')
  return (
    <Form>
      <BlockTitle>
        <T9n t='step_title_card' />
      </BlockTitle>

      <Card>
        <Input
          labelLexic='form_card_number'
          labelWidth={122}
          paddingX={21}
          title={defaultMessage}
        />
        <Row>
          <Input
            labelLexic='form_card_expiration'
            title={defaultMessage}
          />
          <Input
            labelLexic='form_card_code'
            maxLength={3}
            title={defaultMessage}
          />
        </Row>
      </Card>
      <ButtonsBlock>
        <ButtonSolid type='submit'>
          <T9n t='next' />
        </ButtonSolid>
      </ButtonsBlock>
    </Form>
  )
}