import { useEffect, useRef, useState } from "react"

declare global {
  interface Window {
    turnstile: any
  }
}

type Props = {
  siteKey: string
  onVerify: (token: string) => void
  theme?: "light" | "dark" | "auto"
  size?: "normal" | "compact" | "flexible"
}

export default function TurnstileWidget({ siteKey, onVerify }: Props) {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!window.turnstile || !ref.current) return

    const id = window.turnstile.render(ref.current, {
      sitekey: siteKey,
      callback: onVerify,
      size: "flexible", // ← teste d'abord
    })

    return () => {
      if (window.turnstile && id) window.turnstile.remove(id)
    }
  }, [siteKey])

  return (
    <div
      ref={ref}
      className="cf-turnstile w-full"
      style={{ minHeight: "65px" }} // 👈 force une hauteur visible
    />
  )
}