// // components/ReCaptchaWrapper.tsx
// import { forwardRef } from 'react';
// import ReCAPTCHA from 'react-google-recaptcha';
// import type { ReCAPTCHA as ReCAPTCHAType } from 'react-google-recaptcha';

// const ReCaptchaWrapper = forwardRef<ReCAPTCHAType, React.ComponentProps<typeof ReCAPTCHA>>(
//   (props, ref) => <ReCAPTCHA {...props} ref={ref} />
// );

// ReCaptchaWrapper.displayName = 'ReCaptchaWrapper';

// export default ReCaptchaWrapper;

'use client';

import React, { useImperativeHandle, useRef, forwardRef } from 'react';
import ReCAPTCHA, { ReCAPTCHAProps } from 'react-google-recaptcha';

export type ReCaptchaHandle = {
  reset: () => void;
  execute: () => Promise<string | null>;
};

const ReCaptchaWrapper = forwardRef<ReCaptchaHandle, ReCAPTCHAProps>(
  (props, ref) => {
    const innerRef = useRef<ReCAPTCHA | null>(null);

    useImperativeHandle(ref, () => ({
      reset: () => innerRef.current?.reset(),
      execute: () => innerRef.current?.executeAsync() ?? Promise.resolve(null),
    }));

    // ⬇️ this cast is REQUIRED because the library typings are broken
    const ReCaptchaComponent =
      ReCAPTCHA as unknown as React.FC<ReCAPTCHAProps & { ref?: any }>;

    return <ReCaptchaComponent {...props} ref={innerRef} />;
  }
);

ReCaptchaWrapper.displayName = 'ReCaptchaWrapper';

export default ReCaptchaWrapper;