PermaData Captcha

import { useState } from 'react';
import { CaptchaCheckbox } from '@/components/CaptchaCheckbox';

export default function ContactForm() {
  const [isCaptchaValid, setIsCaptchaValid] = useState(false);
  const [captchaToken, setCaptchaToken] = useState<string>();
  
  const handleCaptchaValidityChange = (
    isValid: boolean, 
    token?: string
  ) => {
    setIsCaptchaValid(isValid);
    setCaptchaToken(token);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!isCaptchaValid || !captchaToken) {
      alert('Please complete the captcha');
      return;
    }
    
    // Create FormData and add the captcha token
    const formData = new FormData(e.target as HTMLFormElement);
    formData.append('captcha-token', captchaToken);
    
    // Submit to your server action
    const result = await submitContactForm(formData);
    
    // Handle the result...
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Your form fields */}
      <input name="name" type="text" />
      <input name="email" type="email" />
      
      {/* Add the captcha component */}
      <CaptchaCheckbox 
        onValidityChange={handleCaptchaValidityChange} 
      />
      
      <button 
        type="submit" 
        disabled={!isCaptchaValid}
      >
        Submit
      </button>
    </form>
  );
}

// File: app/actions/captcha-actions.ts
// This file should start with the "use server" directive

// Import the verification function
import { verifyCaptchaToken } from '@/lib/captcha'

export async function submitContactForm(formData: FormData) {
  // Extract the captcha token
  const captchaToken = formData.get('captcha-token');
  
  if (!captchaToken) {
    return { 
      success: false, 
      error: 'Captcha verification required' 
    };
  }
  
  // Verify the captcha token directly
  const verifyResult = await verifyCaptchaToken(captchaToken);
  
  if (!verifyResult.valid) {
    return { 
      success: false, 
      error: verifyResult.error || 'Captcha verification failed' 
    };
  }
  
  // Captcha is valid, process the form data
  const name = formData.get('name');
  const email = formData.get('email');
  
  // Your form processing logic here...
  
  return { 
    success: true, 
    message: 'Form submitted successfully' 
  };
}