import React from 'react';
import { Link, useNavigate } from "react-router-dom";

function Login() {
    const navigate = useNavigate();
    const handleLogin = (e) => {
        e.preventDefault();
        // ...login logic...
        navigate('/secretaria/inicio');
    };
    return (
    <>
    <div className="mt-3 card-position">
        <div className="col-lg-5 col-12">
        <div className="card shadow-sm d-flex justify-content-between align-items-center">
            <div id="auth-left">
                <div className="auth-logo">
                    <br />
                    <Link to="/">
                        <h1 className="mb-4 text-center">MediConnect</h1>
                    </Link>
                </div>
                <h3 className="auth-title">Entrar</h3>
                <p className="auth-subtitle mb-5">
                Entre com os dados que você inseriu durante o registro.
                </p>
                <form action="index.html">
                <div className="form-group position-relative has-icon-left mb-4">
                    <input
                    type="text"
                    className="form-control form-control-xl"
                    placeholder="Username"
                    />
                    <div className="form-control-icon">
                    <i className="bi bi-person" />
                    </div>
                </div>
                <div className="form-group position-relative has-icon-left mb-4">
                    <input
                    type="password"
                    className="form-control form-control-xl"
                    placeholder="Password"
                    />
                    <div className="form-control-icon">
                    <i className="bi bi-shield-lock" />
                    </div>
                </div>
                <div className="form-check form-check-lg d-flex align-items-end">
                    <input
                    className="form-check-input me-2"
                    type="checkbox"
                    defaultValue=""
                    id="flexCheckDefault"
                    />
                    <label
                    className="form-check-label text-gray-600"
                    htmlFor="flexCheckDefault"
                    >
                    Manter-me conectado
                    </label>
                </div>
                <button className="btn btn-primary btn-block btn-lg shadow-lg mt-5"
                onClick={handleLogin}>
                Entrar
                </button>
                </form>
                <div className="text-center mt-5 text-lg fs-4">
                <p className="text-gray-600">
                    Não tem uma conta?
                    <Link className="font-bold" to={'/register'}>
                    Cadastre-se
                    </Link>
                    .
                </p>
                <p>
                    <Link className="font-bold" to={'/forgotPassword'}>
                    Esqueceu a senha?
                    </Link>
                    .
                </p>
                </div>
            </div>
            <div className="col-lg-7 d-none d-lg-block">
            <div id="auth-right"></div>
            </div>
        </div>
        </div>
    </div>
    </>
    );
}

export default Login;