import { useAccount, useDisconnect, useEnsAvatar, useEnsName } from 'wagmi'
import Image from 'next/image'

export function Account() {
  const { address } = useAccount()
   const { disconnect } = useDisconnect()
  const { data: ensName } = useEnsName({ address })
  const { data: ensAvatar } = useEnsAvatar({ name: ensName! })

  console.log("wallet address is " + address)

  return (
    <div className='flex items-center flex-col justify-center space-y-4 border-2 border-white p-2'>
       
      {/* <p className='text-white font-bold text-[20px]'>{address}</p> */}
      <button className='text-white text-[18px]' onClick={() => disconnect()}>Disconnect Wallet</button>
    </div>
  )
}