import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef, useState } from 'react';
import RecaptchaWrapper from '../../node_modules/.pnpm/react-google-recaptcha@3.1.0_react@18.3.1/node_modules/react-google-recaptcha/lib/esm/recaptcha-wrapper.js';
import '../../node_modules/.pnpm/react-google-recaptcha@3.1.0_react@18.3.1/node_modules/react-google-recaptcha/lib/esm/recaptcha.js';
import classNames from '../../_virtual/index.js';
import Typography from '../Typography/Typography.js';

// Extend the props to include React.RefAttributes
const FixedReCAPTCHA = RecaptchaWrapper;
const Recaptcha = forwardRef(({ onVerify, className = '', error: externalError, sitekey, ...props }, ref) => {
    const [internalError, setInternalError] = useState(null);
    const handleChange = (token) => {
        if (token) {
            setInternalError(null);
            onVerify(token);
        }
        else {
            setInternalError('Please complete the CAPTCHA');
        }
    };
    const error = externalError || internalError;
    return (jsxs("div", { className: classNames('ff-recaptcha-wrapper', className), children: [jsx(FixedReCAPTCHA, { ref: ref, sitekey: sitekey, onChange: handleChange, ...props }), error && (jsx("div", { className: "ff-recaptcha-error", children: jsx(Typography, { fontSize: 12, children: error }) }))] }));
});

export { Recaptcha as default };
//# sourceMappingURL=Recaptcha.js.map
