import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { Eye, EyeOff } from "lucide-react";
import { Input } from "../../components/ui/input";
export function SecretPhraseFields({ secret, secretConfirm, onSecretChange, onSecretConfirmChange, }) {
    const [isRevealed, setIsRevealed] = useState(false);
    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: isRevealed ? "relative col-span-2" : "relative", children: [_jsx(Input, { "data-testid": "secret-input", type: isRevealed ? "text" : "password", placeholder: "Create secret phrase", value: secret, onChange: (event) => onSecretChange(event.target.value), autoComplete: "off", className: "secret-phrase-input bg-neutral-grey-5/50 pr-9" }), _jsx("button", { type: "button", "aria-label": `${isRevealed ? "Hide" : "Show"} secret phrase`, "aria-pressed": isRevealed, onClick: () => setIsRevealed((revealed) => !revealed), className: "text-neutral-grey-50 hover:text-neutral-grey-100 focus-visible:outline-neutral-grey-100/70 absolute top-1/2 right-1.5 flex h-7 w-7 -translate-y-1/2 cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:outline", children: isRevealed ? (_jsx(EyeOff, { strokeWidth: 1, className: "h-4 w-4", "aria-hidden": "true" })) : (_jsx(Eye, { strokeWidth: 1, className: "h-4 w-4", "aria-hidden": "true" })) })] }), !isRevealed && (_jsx(Input, { "data-testid": "secret-confirm-input", type: "password", placeholder: "Confirm secret phrase", value: secretConfirm, onChange: (event) => onSecretConfirmChange(event.target.value), autoComplete: "off", className: "secret-phrase-input bg-neutral-grey-5/50" }))] }));
}
//# sourceMappingURL=SecretPhraseInput.js.map