'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 Register = () => {
	const { usernameRef, emailRef, passwordRef, confpasswordRef } = useData();
	const { handleSubmit } = useActions({
		usernameRef,
		emailRef,
		passwordRef,
		confpasswordRef,
	});

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

				<div
					role='form'
					className='form'
				>
					<div className='inputContainer'>
						<input
							ref={usernameRef}
							type='text'
							name='name'
							className='input'
							required
						/>
						<label className='inputLabel'>
							Nom d&apos;utilisateur
						</label>
					</div>
					<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>
					<div className='inputContainer'>
						<input
							ref={confpasswordRef}
							type='password'
							name='confpassword'
							className='input'
							required
						/>
						<label className='inputLabel'>
							Confirmer le mot de passe
						</label>
					</div>
				</div>
				<div className='buttonsContainer'>
					<button
						className='submitButton'
						onClick={handleSubmit}
					>
						S&apos;inscrire
					</button>
					<Link
						href={'/auth/login'}
						className='submitButton secondary'
					>
						Se connecter
					</Link>
				</div>
			</div>
		</div>
	);
};

export default Register;