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

// --------------------------------------------------- Components ------------------------------------------------------
import Link from 'next/link';
import Input from '@/components/Input/Input';
// ---------------------------------------------------------------------------------------------------------------------

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

const Settings = () => {
	return (
		<div className='settings'>
			<div className='header'>
				<Link
					href={'/statistics'}
					className='backButton'
				>
					<ArrowRightIcon
						style={{
							rotate: '180deg',
						}}
					/>
				</Link>
				<p className='title'>Éditer le profil</p>
			</div>

			<form className='form'>
				<Input
					label="Nom d'utilisateur"
					type='text'
					name='username'
					defaultValue='Un Épicier'
					autoComplete='off'
					required
				/>
				<Input
					label='Mot de passe'
					type='password'
					name='password'
					defaultValue='********'
					autoComplete='off'
					required
				/>

				<div className='buttonsContainer'>
					<button
						type='reset'
						className='resetButton'
					>
						Annuler
					</button>
					<button
						type='submit'
						className='submitButton'
					>
						Appliquer
					</button>
				</div>
			</form>

			<div className='separator' />

			<button className='deleteButton'>Supprimer mon compte</button>
		</div>
	);
};

export default Settings;