import Input from 'elements/Input';
import Button from 'elements/Button';
import styles from './Form.module.scss';
import { H3 } from 'elements/H';
import { title } from 'config/constants';
import { useRouter } from 'next/router';
import Error from 'elements/Error';

export default function Form() {
  const router = useRouter();
  const { invalid } = router.query;
  const error = invalid ? <Error>Неверный логин или пароль</Error> : null;

  return (
    <form className={styles.form} method="post" action="/signin">
      <H3>{title}</H3>
      <Input name="login" type="text" placeholder="Логин" required autoComplete="on" />
      <Input name="password" type="password" placeholder="Пароль" required autoComplete="on" />
      {error}
      <Button>Войти</Button>
    </form>
  );
}