import { Button, Loader, Events, Inputs } from '../../index';

export default function Login1({
    submit,
    response,
    credentials,
    setCredentials,
    className,
    signIn,
    recovery,
    loader,
}: Forms.Login) {
    return (
        <>
            <form className='darkContainer mx-auto my-3 rounded-xl bg-gray-100 p-10 shadow md:w-10/12'>
                <Inputs.Text
                    label={{
                        text: 'Usuario',
                        className,
                    }}
                    name='username'
                    required={true}
                    className='w-full m-1 rounded-lg border-2 border-slate-300 px-2 py-1 text-base text-slate-700'
                    autoComplete='username'
                    onChange={(e) =>
                        Events.Forms.handleInput(
                            e.target.value,
                            'username',
                            credentials,
                            setCredentials
                        )
                    }
                />
                <Inputs.Password
                    label={{
                        text: 'Contraseña',
                        className,
                    }}
                    name='password'
                    required={true}
                    className='w-full m-1 rounded-lg border-2 border-slate-300 px-2 py-1 text-base text-slate-700'
                    autoComplete='password'
                    onChange={(e) =>
                        Events.Forms.handleInput(
                            e.target.value,
                            'password',
                            credentials,
                            setCredentials
                        )
                    }
                    isReading
                />
                <div
                    onClick={(e) => {
                        e.preventDefault, submit();
                    }}>
                    <Button.Button1
                        name='Ingresar'
                        ariaLabel='ingresar'
                        type='button'
                    />
                </div>
                {signIn && (
                    <p className='text text-sm text-slate-500 hover text-center m-auto'>
                        <a aria-label='Registrarse' href={signIn}>
                            Registrarse
                        </a>
                    </p>
                )}
                {recovery && (
                    <p className='text text-sm text-slate-500 hover text-center m-auto'>
                        <a aria-label='Registrarse' href={recovery}>
                            ¿Olvidó su contraseña?
                        </a>
                    </p>
                )}
                {response && <Inputs.Response result={response} />}
            </form>
            <Loader.Loader1
                img={loader}
                alt='Espera mientras valida las credenciales'
                id='loading'
            />
        </>
    );
}