import InputAdornment from '@mui/material/InputAdornment';
import PasswordIcon from '@mui/icons-material/Password';
import TextField from '@mui/material/TextField';

import type { StandardTextFieldProps } from '@mui/material';

const PasswordInput = ({
	hideIcon,
	inputIcon,
	InputProps,
	...props
}: PasswordInputProps) => {
	const startIcon = inputIcon ? (
		inputIcon
	) : (
		<InputAdornment position='start'>
			<PasswordIcon />
		</InputAdornment>
	);

	return (
		<TextField
			{...{
				InputProps: {
					startAdornment: !hideIcon ? startIcon : undefined,
					...InputProps,
				},
				...props,
			}}
		/>
	);
};

PasswordInput.defaultProps = {
	autoCapitalize: 'none',
	autoComplete: 'current-password',
	autoFocus: true,
	fullWidth: true,
	hideIcon: false,
	id: 'password-input',
	label: '',
	placeholder: 'Enter your password',
	required: true,
	type: 'password',
	variant: 'outlined',
};

export default PasswordInput;

export interface PasswordInputProps extends StandardTextFieldProps {
	hideIcon?: boolean;
	inputIcon?: React.ReactNode;
}
