import useUser, { logout } from '@/web/api/hooks/useUser'
import { toHttps } from '@/web/utils/common'
import toast from 'react-hot-toast'
import { useTranslation } from 'react-i18next'

const UserCard = () => {
  const { data: user } = useUser()
  const { t } = useTranslation()

  return (
    <div className='flex items-center justify-between overflow-hidden rounded-3xl bg-white/5 p-6'>
      <div className='flex items-center'>
        <img className='h-16 w-16 rounded-full' src={toHttps(user?.profile?.avatarUrl)} />
        <div className='ml-4'>
          <div className=' text-xl font-semibold dark:text-white'>
            {user?.profile?.nickname || ''}
          </div>
          {(user?.profile?.signature || user?.profile?.vipType) && (
            <div className='mt-1 flex items-center text-sm font-medium text-white/40'>
              {user?.profile?.vipType ? (
                <img
                  className='mr-1 h-4'
                  src='data:image/png;base64,[encoded data, 5596 characters]'
                />
              ) : null}
              {user?.profile?.signature}
            </div>
          )}
        </div>
      </div>

      <div>
        <button
          onClick={() => logout()}
          className='flex items-center rounded-full px-4 py-3 font-semibold text-white/30 transition-all duration-300 hover:bg-white/5 hover:text-white/60'
        >
          {t`auth.logout`}
        </button>
      </div>
    </div>
  )
}

export default UserCard
