import { useWallet } from '@solana/wallet-adapter-react';
import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
import '@solana/wallet-adapter-react-ui/styles.css'; // Import the default styles

const MainComponent = () => {
  const { publicKey } = useWallet();

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center">
      <header className="bg-white shadow w-full py-4 px-6 mb-8">
        <h1 className="text-2xl font-bold text-gray-900">LazorKit Wallet Integration</h1>
      </header>

      <main className="flex-grow flex flex-col items-center justify-center p-6">
        <div className="bg-white p-8 rounded-lg shadow-md max-w-md w-full text-center">
          <p className="text-lg text-gray-700 mb-6">
            Connect your lazorkit passkey with this demo dapp.
          </p>
          <div className="wallet-button-container">
            <WalletMultiButton className="bg-gray-700 hover:bg-gray-800 text-white font-bold py-2 px-4 rounded" />
          </div>
          {publicKey ? (
            <p className="mt-4 text-sm text-gray-600">
              Connected: {publicKey.toBase58()}
            </p>
          ) : (
            <p className="mt-4 text-sm text-gray-600">
              Wallet not connected.
            </p>
          )}
        </div>
      </main>
    </div>
  );
};

export default MainComponent;