import { useLingui, Trans } from '../../../../../../node_modules/@lingui/react/dist/index.mjs';
import React__default from 'react';
import { useTimeRemaining, formatCountdown } from '../atoms/Countdown.mjs';
import OTPEntry from '../molecules/OTPEntry.mjs';

const SentOTPEntry = ({ expiration, formattedDestination, isSubmitting, onSubmit, errorMessage })=>{
    const { i18n: $__i18n, _: $__ } = useLingui();
    // Unfortunately for backwards compatibility, the variable in the localization template
    // must be named timeRemaining
    const [_timeRemaining, active] = useTimeRemaining(expiration);
    const timeRemaining = formatCountdown(_timeRemaining);
    const formattedText = active ? $__i18n._({
        id: "passcode.expirationCountdown",
        message: "Your code expires in {timeRemaining}.",
        values: {
            timeRemaining: timeRemaining
        }
    }) : $__i18n._({
        id: "passcode.expired",
        message: "Your code has expired."
    });
    return /*#__PURE__*/ React__default.createElement(OTPEntry, {
        header: $__i18n._({
            id: "passcode.title",
            message: "Enter passcode"
        }),
        helperContent: formattedText,
        instruction: /*#__PURE__*/ React__default.createElement(Trans, {
            id: "passcode.sentConfirmation",
            message: "A 6-digit passcode was sent to you at <bold>{destination}</bold>.",
            components: {
                bold: /*#__PURE__*/ React__default.createElement("b", null)
            },
            values: {
                destination: formattedDestination
            }
        }),
        isSubmitting: isSubmitting,
        onSubmit: onSubmit,
        errorMessage: errorMessage
    });
};

export { SentOTPEntry };
//# sourceMappingURL=SentOTPEntry.mjs.map
