// MetaMaskButton.jsx
import React from 'react';

import { useState , useEffect } from 'react';
import { BsFillTrashFill } from 'react-icons/bs';  // Importing the trashcan icon
import connectMetaMask from './Helpers/connectMetaMask';
import useMetaMaskEffect from './Helpers/useMetaMaskEffect';
import CoinSvg from '../assets/SharedSVG/Debit card.svg'; // Adjust path as needed

const MetaMaskButton = ({ onDataChange }) => {
  const [account, setAccount] = useState(null);
  const [web3, setWeb3] = useState(null);
  const [tokenContract, setTokenContract] = useState(null);
  const [userBalance, setUserBalance] = useState(0);

  useMetaMaskEffect(account, tokenContract, setUserBalance, onDataChange, web3);

  useEffect(() => {
    if (account && onDataChange) {
      onDataChange(account);
    }
  }, [account]);

  const initiateConnection = () => connectMetaMask(setWeb3, setAccount, setTokenContract);

  const disconnectMetaMask = () => {
    setAccount(null);
  };

  return (
    <div className="flex justify-between items-center w-full">
      <button 
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
        onClick={account ? disconnectMetaMask : initiateConnection}
      >
        {account ? `Connected: ${account.substring(0, 6)}...${account.substring(account.length - 4)}` : 'Connect with MetaMask'}
      </button>

      <div className="flex flex-col items-end">
        {account && (
          <div className="relative inline-flex items-center ">
            <img src={CoinSvg} alt="Coin" className="h-10 w-10" />
            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-50 rounded-full p-1 flex flex-col items-center justify-between">
              <span className="text-xs text-white">
                {web3.utils.fromWei(userBalance, 'ether')}
              </span>
            </div>
          </div>
        )}
        {account && (
          <BsFillTrashFill className="cursor-pointer hover:text-red-900" onClick={disconnectMetaMask} title="Disconnect from MetaMask" />
        )}
      </div>
    </div>
  );
};

export default MetaMaskButton;