'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';
import Input from '@/components/Input/Input';
// ---------------------------------------------------------------------------------------------------------------------

const Login = () => {
	const [error, setError] = useState<string | null>(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
			/>

			<div className='formContainer'>
				<h1 className='formTitle'>Connexion</h1>

				<form
					className='form'
					onSubmit={handleSubmit}
				>
					{error && <p className='error'>{error}</p>}
					<Input
						name='username'
						type='text'
						placeholder="Nom d'utilisateur"
						autoComplete='username'
						required
					/>
					<Input
						type='password'
						name='password'
						placeholder='Mot de passe'
						autoComplete='password'
						required
					/>

					<button
						type='submit'
						className='submitButton'
						disabled={isLoading}
					>
						Se connecter
						{isLoading && <Loader />}
					</button>
				</form>
			</div>
		</div>
	);
};

export default Login;
