const preact = require('preact');

function renderLogin({ account, submitLogin }) {
    if (account) return <div>{JSON.stringify(account)}</div>;

    const details = {
        name: '',
        password: '',
    };

    return (
        <div>
            <div className="field">
                <p className="control has-icons-left has-icons-right">
                    <input className="input" type="email" placeholder="Email" onChange={e => (details.name = e.target.value)} />
                    <span className="icon is-small is-left">
                        <i className="fas fa-user" />
                    </span>
                    <span className="icon is-small is-right">
                        <i className="fas fa-check" />
                    </span>
                </p>
            </div>
            <div className="field">
                <p className="control has-icons-left">
                    <input
                        className="input"
                        type="password"
                        placeholder="Password"
                        onChange={e => (details.password = e.target.value)}
                    />
                    <span className="icon is-small is-left">
                        <i className="fas fa-lock" />
                    </span>
                </p>
            </div>
            <div className="field">
                <p className="control">
                    <button className="button is-success" type="submit" onClick={() => submitLogin(details.name, details.password)}>
                Login
                    </button>
                </p>
            </div>
        </div>
    );
}

module.exports = renderLogin;