# Guide d'utilisation du système ReCaptcha Provider

Ce guide explique comment utiliser notre système ReCaptcha basé sur un **Provider** et un hook React, pour simplifier l'intégration de Google reCAPTCHA avec gestion des cookies.

---

## 1. Structure du système

Le système se compose de trois éléments principaux :

1. **`RecaptchaProvider`**  
   - Encapsule votre formulaire et active le reCAPTCHA automatiquement selon le statut des cookies.
   - Fournit un contexte React (`useRecaptcha`) pour accéder au token et au `formRef`.

2. **`useRecaptcha`**  
   - Hook React pour accéder au contexte du Provider.  
   - Fournit :
     - `enabled` : booléen indiquant si le reCAPTCHA est actif (cookie accepté).  
     - `getToken()` : fonction pour récupérer le token reCAPTCHA actuel.  
     - `formRef` : référence au formulaire pour manipulation ou focus.

3. **`RecaptchaForm`**  
   - Wrapper autour du `<form>` standard.  
   - S'occupe de :
     - Injecter le conteneur reCAPTCHA `.r_captcha` si actif.
     - Ajouter l’attribut `inert` sur le formulaire si le reCAPTCHA n’est pas encore activé.
     - Appeler la fonction `getToken()` au submit si nécessaire.

---

## 2. Utilisation dans un formulaire

```tsx
import { useForm } from "@inertiajs/react";
import { RecaptchaProvider } from "@/front/providers/RecaptchaProvider";
import RecaptchaForm from "@/front/Components/Base/RecaptchaForm";

export default function ContactForm() {
  const { data, setData, post, processing } = useForm({
    name: "",
    email: "",
    message: "",
  });

  const handleSubmit = (token: string) => {
    post("/contact");
  };

  return (
    <RecaptchaProvider>
      <RecaptchaForm onSubmit={handleSubmit} data={data}>
       ...input + boutton submit (pas besoin de balise form)
      </RecaptchaForm>
    </RecaptchaProvider>
  );
}