import { useState } from "react";

interface PasswordInputProps {
	id: string;
	value: string;
	onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
	required?: boolean;
	autoComplete?: string;
	minLength?: number;
	maxLength?: number;
	placeholder?: string;
}

export function PasswordInput({
	id,
	value,
	onChange,
	required,
	autoComplete,
	minLength,
	maxLength,
	placeholder,
}: PasswordInputProps) {
	const [showPassword, setShowPassword] = useState(false);

	return (
		<div className="password-input-wrapper">
			<input
				id={id}
				type={showPassword ? "text" : "password"}
				value={value}
				onChange={onChange}
				required={required}
				autoComplete={autoComplete}
				minLength={minLength}
				maxLength={maxLength}
				placeholder={placeholder}
			/>
			<button
				type="button"
				className="password-toggle-btn"
				onClick={() => setShowPassword(!showPassword)}
				tabIndex={-1}
				aria-label={showPassword ? "Hide password" : "Show password"}
			>
				{showPassword ? (
					<svg
						viewBox="0 0 24 24"
						fill="none"
						stroke="currentColor"
						strokeWidth="2"
						strokeLinecap="round"
						strokeLinejoin="round"
					>
						<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
						<line x1="1" y1="1" x2="23" y2="23" />
					</svg>
				) : (
					<svg
						viewBox="0 0 24 24"
						fill="none"
						stroke="currentColor"
						strokeWidth="2"
						strokeLinecap="round"
						strokeLinejoin="round"
					>
						<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
						<circle cx="12" cy="12" r="3" />
					</svg>
				)}
			</button>
		</div>
	);
}