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

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

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