import React, { useState } from "react";
import { Button, Input } from "antd";
import useAuth from "../../useAuth";

export const LogIn = () => {
    const { login, loading, error } = useAuth();
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    return (
        <div className="Box Small">
            <div className="Section">
                <div className="Section">
                    <Input
                        placeholder="User"
                        onChange={(ev) => setEmail(ev.target.value)}
                    />
                    <Input.Password
                        placeholder="Password"
                        onChange={(ev) => setPassword(ev.target.value)}
                    />
                    <Button
                        style={{ width: "100%" }}
                        onClick={async () =>
                            login({ email, password })
                        }
                        loading={loading}
                    >
                        Log in
                    </Button>
                    {error ? (
                        <div className="Disconnected">{error}</div>
                    ) : (
                        <></>
                    )}
                </div>
            </div>
        </div>
    );
};