import { SharedData } from '@/types';
import { usePage } from '@inertiajs/react';
import ReCAPTCHA from 'react-google-recaptcha';

interface RecaptchaWidgetProps {
  onChange: (token: string | null) => void;
}

export default function RecaptchaWidget({ onChange }: RecaptchaWidgetProps) {
  const { branding } = usePage<SharedData>().props;
  const recaptcha = branding?.google_recaptcha;

  if (!recaptcha?.enabled || !recaptcha.site_key) return null;

  return (
    <div className="flex justify-center">
      <ReCAPTCHA sitekey={recaptcha.site_key} onChange={onChange} />
    </div>
  );
}