// import jsx
import clsx from 'clsx';
import React from 'react';
import useTranslation from 'next-translate/useTranslation';

// icons
import IconInfluence from '../../../icons/Influence';

// signals
import UserSignal from '../../../signals/User';

// locals
import Tooltip from '../../Tooltip';
import UserName from '../../User/Name';
import UserAvatar from '../../User/Avatar';

/**
 * main leftbar user
 *
 * @param props 
 */
const ComponentLayoutRightbarUser = (props = {}) => {
  // translation
  const { t : tUser } = useTranslation('user');

  // return jsx
  return (
    <li className={clsx(
      'px-3 py-2 rounded-xl transition-all duration-200 cursor-pointer group dark:hover:text-white hover:bg-primary-BG dark:hover:bg-primary-600',
    )}>
      <div className="flex items-center">
        <div className="flex-shrink-0">
          <UserAvatar
            user={UserSignal.value}
            className="w-10 h-10 rounded-full"
          />
        </div>
        <div className="flex-1 min-w-0 ms-3">
          <div>
            <UserName
              noLink
              noUsername
              
              user={UserSignal.value}
              size="small"
              endAdornment={!UserSignal.value?.username ? tUser('anonymous') : (
                <Tooltip title={tUser('tooltip.mana')}>
                  <span className="inline-flex flex-row items-center font-semibold">
                    <IconInfluence className="mr-1 w-3 h-3" filled />
                    {parseFloat(UserSignal.value?.wallet?.mana || 0).toLocaleString()}
                  </span>
                </Tooltip>
              )}
            />
          </div>
        </div>
      </div>
    </li>
  );
};

/**
 * export default user
 */
export default ComponentLayoutRightbarUser;