"use client";
import { useEffect } from "react";

export default function GoogleLoginButton() {
  useEffect(() => {
    // Escuta mensagens vindas do popup
    const handleMessage = (event: MessageEvent) => {
      if (
        event.origin !== "http://localhost:4000" &&
        event.origin !== "http://localhost:3000"
      )
        return;
      if (event.data.type === "google-auth-success") {
        // Aqui você pode salvar no localStorage, enviar pro backend, etc.
      }
    };
    window.addEventListener("message", handleMessage);
    return () => window.removeEventListener("message", handleMessage);
  }, []);

  const handleGoogleLogin = () => {
    const width = 500;
    const height = 600;
    const left = (window.innerWidth - width) / 2;
    const top = (window.innerHeight - height) / 2;
    window.open(
      "http://localhost:4000/auth/google",
      "googleLoginPopup",
      `width=${width},height=${height},top=${top},left=${left},resizable=no,scrollbars=no,status=no`,
    );
  };

  return (
    <button
      onClick={handleGoogleLogin}
      className="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700"
    >
      Conectar com Google
    </button>
  );
}