import { useWallet } from "@aptos-labs/wallet-adapter-react";

export function WalletConnect() {
  const { 
    connect, 
    disconnect, 
    account, 
    connected, 
    wallets,
    isLoading,
  } = useWallet();

  // Format address for display
  const formatAddress = (address: string) => {
    return `${address.slice(0, 6)}...${address.slice(-4)}`;
  };

  if (isLoading) {
    return <div>Loading wallet...</div>;
  }

  if (connected && account) {
    return (
      <div className="wallet-connected">
        <p>
          <strong>Connected:</strong> {formatAddress(account.address.toString())}
        </p>
        <button onClick={disconnect}>
          Disconnect Wallet
        </button>
      </div>
    );
  }

  return (
    <div className="wallet-connect">
      <h3>Connect Wallet</h3>
      <div className="wallet-options">
        {wallets?.filter(wallet => wallet.readyState === "Installed").map((wallet) => (
          <button 
            key={wallet.name} 
            onClick={() => connect(wallet.name)}
          >
            Connect {wallet.name}
          </button>
        ))}
        {wallets?.filter(wallet => wallet.readyState === "Installed").length === 0 && (
          <p>No wallets detected. Please install a wallet extension.</p>
        )}
      </div>
    </div>
  );
}