'use client';

import { Input } from "./Input.mjs";
import { EyeIcon, EyeOffIcon } from "lucide-react";
import { useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/Input/InputPassword.tsx
const InputPassword = (props) => {
	const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);
	const handlePasswordReveal = (e) => {
		e.preventDefault();
		e.stopPropagation();
		setIsPasswordRevealed((isPasswordRevealed$1) => !isPasswordRevealed$1);
	};
	const EyeIconComponent = isPasswordRevealed ? EyeIcon : EyeOffIcon;
	return /* @__PURE__ */ jsxs("div", {
		className: "relative",
		children: [/* @__PURE__ */ jsx(Input, {
			...props,
			"aria-label": "password",
			type: isPasswordRevealed ? "text" : "password"
		}), /* @__PURE__ */ jsx("button", {
			"data-testid": "eye-icon",
			type: "button",
			className: "absolute right-2 h-full flex-row items-center",
			onClick: handlePasswordReveal,
			"aria-label": isPasswordRevealed ? "Hide password" : "Show password",
			children: /* @__PURE__ */ jsx(EyeIconComponent, {
				className: "mr-2 inline-block cursor-pointer text-neutral",
				size: 20
			})
		})]
	});
};

//#endregion
export { InputPassword };
//# sourceMappingURL=InputPassword.mjs.map