import React from 'react'

import { PAGES } from 'config'

import { Logo } from 'features/Logo'
import { Input, ButtonSolid } from 'features/Common'
import { formIds } from 'features/Register/components/RegistrationStep/config'

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

const labelWidth = 60

export const Login = () => {
  const { handleSubmit } = useForm()

  return (
    <CenterBlock>
      <Logo />
      <Form onSubmit={handleSubmit}>
        <BlockTitle>Авторизация</BlockTitle>

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

        <ButtonsBlock>
          <ButtonSolid type='submit'>Войти</ButtonSolid>
          <RegisterButton to={PAGES.register}>
            Зарегистрироваться
          </RegisterButton>
        </ButtonsBlock>
      </Form>
    </CenterBlock>
  )
}