import React from 'react'

import { Background } from 'features/Background'
import { Logo } from 'features/Logo'
import {
  Input,
  ButtonSolid,
  ButtonOutline,
} from 'features/Common'

import {
  BlockTitle,
  CenterBlock,
  ButtonsBlock,
  Form,
} from './styled'

const labelWidth = 60

export const Login = () => (
  <Background>
    <CenterBlock>
      <Logo />
      <Form>
        <BlockTitle>Авторизация</BlockTitle>

        <Input
          required
          id='email'
          type='email'
          label='Логин'
          labelWidth={labelWidth}
        />
        <Input
          required
          id='password'
          type='password'
          label='Пароль'
          labelWidth={labelWidth}
        />

        <ButtonsBlock>
          <ButtonSolid>Войти</ButtonSolid>
          <ButtonOutline type='button'>
            Зарегистрироваться
          </ButtonOutline>
        </ButtonsBlock>
      </Form>
    </CenterBlock>
  </Background>
)