'use client';

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

// -------------------------------------------------- React & Next -----------------------------------------------------
import { useState } from 'react';
// ---------------------------------------------------------------------------------------------------------------------

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

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

// ------------------------------------------------- Assets & Styles ---------------------------------------------------
import Loader from '@/assets/Loader';
import './styles.scss';
// ---------------------------------------------------------------------------------------------------------------------

const Login = () => {
	const [error, setError] = useState(null);
	const [isLoading, setIsLoading] = useState(false);
	const { handleSubmit } = useActions({ setError, setIsLoading });

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

			<form
				className='formContainer'
				onSubmit={handleSubmit}
			>
				<h1 className='formTitle'>Connexion</h1>

				<div className='form'>
					{error && <p className='error'>{error}</p>}
					<div className='inputContainer'>
						<input
							type='text'
							name='username'
							className='input'
							required
						/>
						<label className='inputLabel'>
							Nom d&apos;utilisateur
						</label>
					</div>
					<div className='inputContainer'>
						<input
							type='password'
							name='password'
							className='input'
							required
						/>
						<label className='inputLabel'>Mot de passe</label>
					</div>
				</div>
				<div className='buttonsContainer'>
					<button
						type='submit'
						className='submitButton'
						disabled={isLoading}
					>
						Se connecter
						{isLoading && <Loader />}
					</button>
				</div>
			</form>
		</div>
	);
};

export default Login;