'use client';

// ---------------------------------------------------------------------------------------------------------------------
//!                                                      Imports
// ---------------------------------------------------------------------------------------------------------------------

// --------------------------------------------------- Components ------------------------------------------------------
import Image from 'next/image';
import Link from 'next/link';
// ---------------------------------------------------------------------------------------------------------------------

// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
import { useData } from './hooks/useData';
import { useActions } from './hooks/useActions';
// ---------------------------------------------------------------------------------------------------------------------

// ------------------------------------------------- Assets & Styles ---------------------------------------------------
import '../styles.scss';
// ---------------------------------------------------------------------------------------------------------------------

const Login = () => {
	const { emailRef, passwordRef } = useData();
	const { handleSubmit } = useActions({ emailRef, passwordRef });

	return (
		<div className='authContainer'>
			<Image
				src={'/logo-transparent.png'}
				className='appLogo'
				alt='appLogo'
				width={1024}
				height={1024}
			/>
			<div className='formContainer'>
				<h1 className='formTitle'>Connexion</h1>

				<div
					role='form'
					className='form'
				>
					<div className='inputContainer'>
						<input
							ref={emailRef}
							type='email'
							name='email'
							className='input'
							required
						/>
						<label className='inputLabel'>Adresse e-mail</label>
					</div>
					<div className='inputContainer'>
						<input
							ref={passwordRef}
							type='password'
							name='password'
							className='input'
							required
						/>
						<label className='inputLabel'>Mot de passe</label>
					</div>

					<Link
						href={'/auth/forgot'}
						className='forgetLink'
					>
						Mot de passe oublié ?
					</Link>
				</div>
				<div className='buttonsContainer'>
					<button
						className='submitButton'
						onClick={handleSubmit}
					>
						Se connecter
					</button>
					<Link
						href={'/auth/register'}
						className='submitButton secondary'
					>
						S&apos;inscrire
					</Link>
				</div>
			</div>
		</div>
	);
};

export default Login;