import Icon from '@/components/icon'
import { useTranslation } from '@/i18n.ts'
import { currentUserAtom } from '@/store/user.ts'
import { Avatar as AntAvatar, Dropdown, Spin } from 'antd'
import { useAtomValue } from 'jotai'

const Avatar = () => {

  const { t } = useTranslation()
  const { data, isLoading } = useAtomValue(currentUserAtom)

  return (
    <div>
      <Dropdown
        key={'user'}
        placement="bottomRight"
        menu={{
          items: [
            {
              key: 'logout',
              icon: <Icon type={'park:Logout'}/>,
              label: <span style={{
                marginInlineStart: 8,
                userSelect: 'none'
              }}>{t('app.header.logout')}</span>,
            },
          ],
        }}
      >
        <Spin spinning={isLoading}>
          <AntAvatar
            key="avatar"
            size={'small'}
            src={data?.avatar || data?.nickname?.substring(0, 1)}>
            {!data?.avatar && data?.nickname?.substring(0, 1)}
          </AntAvatar>
          <span key="name"
                style={{
                  marginInlineStart: 8,
                  userSelect: 'none'
                }}>
          {data?.nickname}
          </span>
        </Spin>
      </Dropdown>
    </div>
  )
}

export default Avatar