import React from 'react';
import './LoginForm.css';

import { useLocalStorage } from './hooks/useLocalStorage';

const LoginForm = () => {
  const [, setName] = useLocalStorage<string>('name', {});
  const [, setPassword] = useLocalStorage<string>('password', {});

  return (
    <form
      className="form-login"
      onSubmit={e => {
        e.preventDefault();
        console.log('BLARG');
        const inputs = new FormData(e.target as HTMLFormElement);
        setName(inputs.get('name') as string);
        setPassword(inputs.get('password') as string);
      }}
    >
      <label>
        Name:
        <input name="name" minLength={2} />
      </label>
      <label>
        Password: + <input name="password" type="password" minLength={3} />
      </label>
      <div className="button-row">
        <button type="submit">Let's Go!</button>
      </div>
    </form>
  );
};

export default LoginForm;