import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, forwardRef } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';
import './Recaptcha.scss';
import classNames from 'classnames';
import Typography from '../Typography';
// Extend the props to include React.RefAttributes
const FixedReCAPTCHA = ReCAPTCHA;
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 default Recaptcha;
//# sourceMappingURL=Recaptcha.js.map