"use client";

import React from 'react';
import { useIsInitialized } from "@coinbase/cdp-hooks";
import { AuthButton } from "@coinbase/cdp-react";
import { getIsInitialized } from '../lib/hook-utils';

export interface WalletAuthProps {
  loadingText?: string;
  className?: string;
}

/**
 * Simple wallet authentication component using CDP's pre-built AuthButton.
 * This is the quickest way to add wallet functionality to your app.
 * 
 * @example
 * ```tsx
 * import { WalletAuth } from 'cdp-wallet-onramp-kit';
 * 
 * function Header() {
 *   return (
 *     <div>
 *       <WalletAuth />
 *     </div>
 *   );
 * }
 * ```
 */
export function WalletAuth({ 
  loadingText = "Loading wallet...",
  className = "" 
}: WalletAuthProps) {
  const isInitializedResult = useIsInitialized();
  const isInitialized = getIsInitialized(isInitializedResult);

  if (!isInitialized) {
    return (
      <div className={`flex items-center justify-center space-x-2 text-gray-600 ${className}`}>
        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400"></div>
        <span className="text-sm">{loadingText}</span>
      </div>
    );
  }

  return <AuthButton className={className} />;
}

/**
 * Export the custom wallet auth component for advanced use cases
 */
export { CustomWalletAuth } from './CustomWalletAuth';