Edit BeachRegistrationForm.tsx

app/beach/BeachRegistrationForm.tsx

@@ -7,7 +7,7 @@ import React, { useRef, useActionState, useEffect } from 'react';
 import { FaUser, FaEnvelope, FaPhone, FaUsers, FaTrophy, FaCheckCircle, FaExclamationTriangle } from "react-icons/fa";
 import { submitRegistration } from './actions';
 
-export default function BeachRegistrationForm({ config }: { config: any }) {
+export default function BeachRegistrationForm({ config, turnstileSiteKey }: { config: any, turnstileSiteKey: string }) {
     const [state, formAction, isPending] = useActionState(submitRegistration, null);
     const formRef = useRef<HTMLFormElement>(null);
     const turnstileRef = useRef<TurnstileInstance>(null);
@@ -130,13 +130,7 @@ export default function BeachRegistrationForm({ config }: { config: any }) {
 
                     <input type="text" name="website" className="hidden" tabIndex={-1} />
 
-                    <div className="flex justify-center py-2">
-                        <Turnstile
-                            ref={turnstileRef}
-                            siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || ''}
-                            options={{ theme: 'light' }}
-                        />
-                    </div>
+                    <div className="flex justify-center py-2"><Turnstile ref={turnstileRef} siteKey={turnstileSiteKey} options={{ theme: 'light' }}/></div>
 
                     {state && (
                         <div className={`flex items-center gap-3 p-5 rounded-2xl font-bold transition-all ${state.success ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>