'use client';

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

// ------------------------------------------------------ React --------------------------------------------------------
import { forwardRef, MouseEvent, useState } from 'react';
// ---------------------------------------------------------------------------------------------------------------------

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

const Input = ({
	name = '',
	type = '',
	placeholder = '',
	defaultValue = '',
	required = false,
	autoComplete = 'off',
}) => {
	const [isPasswordVisible, setIsPasswordVisible] = useState(false);

	const togglePasswordVisibility = (ev: MouseEvent) => {
		ev.stopPropagation();

		setIsPasswordVisible((prev) => !prev);
	};

	return (
		<div className='inputContainer'>
			<input
				type={
					type == 'password'
						? isPasswordVisible
							? 'text'
							: 'password'
						: type
				}
				name={name}
				id={name}
				placeholder={placeholder}
				defaultValue={defaultValue}
				autoComplete={autoComplete}
				required={required}
				className='input'
			/>
			{type == 'password' && (
				<button
					type='button'
					className='passwordToggleButton'
					onClick={togglePasswordVisibility}
				>
					{isPasswordVisible ? <EyeSlashIcon /> : <EyeIcon />}
				</button>
			)}
		</div>
	);
};

export default Input;