document.addEventListener('DOMContentLoaded', () => {
    const connectButton = document.getElementById('connect-metamask');
    const account = localStorage.getItem('metamaskAccount');
  
    if (account) {
      connectButton.innerHTML = `Connected: ${account.slice(0, 6)}...${account.slice(-4)}`;
      connectButton.disabled = true;
  
      const disconnectButton = document.createElement('button');
      disconnectButton.className = 'disconnect-metamask';
      disconnectButton.innerHTML = 'Disconnect';
      document.querySelector('.header-buttons').appendChild(disconnectButton);
  
      disconnectButton.addEventListener('click', () => {
        localStorage.removeItem('metamaskAccount');
        connectButton.innerHTML = 'Connect with MetaMask';
        connectButton.disabled = false;
        disconnectButton.remove();
      });
    }
  
    connectButton.addEventListener('click', async () => {
      if (typeof window.ethereum !== 'undefined') {
        try {
          const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
          const account = accounts[0];
          connectButton.innerHTML = `Connected: ${account.slice(0, 6)}...${account.slice(-4)}`;
          connectButton.disabled = true;
          localStorage.setItem('metamaskAccount', account);
  
          const disconnectButton = document.createElement('button');
          disconnectButton.className = 'disconnect-metamask';
          disconnectButton.innerHTML = 'Disconnect';
          document.querySelector('.header-buttons').appendChild(disconnectButton);
  
          disconnectButton.addEventListener('click', () => {
            localStorage.removeItem('metamaskAccount');
            connectButton.innerHTML = 'Connect with MetaMask';
            connectButton.disabled = false;
            disconnectButton.remove();
          });
        } catch (error) {
          console.error('Error connecting to MetaMask', error);
        }
      } else {
        alert('MetaMask is not installed. Please install it to use this feature.');
      }
    });
  });