import { usePinAuth } from "@camarauth/sdk/react";

function LoginComponent() {
  const auth = usePinAuth({
    apiUrl: "http://localhost:3001",
    whatsappNumber: "+1234567890",
    onSuccess: (user) => console.log("Autenticado:", user),
  });

  // Usar auth...
}

import { usePinAuth } from "@camarauth/sdk/react";

function LoginPage() {
  const auth = usePinAuth({
    apiUrl: "http://localhost:3001",
    whatsappNumber: "+1234567890",
    onSuccess: (user) => {
      // Redirigir al dashboard
      window.location.href = "/dashboard";
    },
    onError: (error) => {
      console.error("Error:", error.message);
    },
  });

  if (auth.status === "success") {
    return <div>¡Bienvenido, {auth.user?.name}!</div>;
  }

  return (
    <div className="login-container">
      <h1>Iniciar sesión</h1>

      {!auth.pin ? (
        <button onClick={auth.generate} disabled={auth.isLoading}>
          {auth.isLoading ? "Conectando..." : "Generar código"}
        </button>
      ) : (
        <div className="auth-display">
          <div className="emojis">
            {auth.emojis.map((emoji, i) => (
              <span key={i} className="emoji">
                {emoji}
              </span>
            ))}
          </div>

          <p>Expira en: {auth.formattedTime}</p>

          {auth.qrCodeUrl && (
            <img
              src={auth.qrCodeUrl}
              alt="Escanear para WhatsApp"
              className="qr-code"
            />
          )}

          <a
            href={auth.whatsappLink}
            target="_blank"
            rel="noopener noreferrer"
            className="whatsapp-btn"
          >
            Abrir WhatsApp
          </a>

          <button onClick={auth.cancel}>Cancelar</button>
        </div>
      )}

      {auth.error && <div className="error">{auth.error.message}</div>}
    </div>
  );
}