import {Avatar, Dropdown} from 'antd';
import css from './index.module.css';
import {FC} from 'react';
import {items, useLogout} from './hook';
import {useStore} from 'zustand';
import {userStore} from '@stores';
import face from '@assets/images/face.svg';

const User: FC = function() {
  const onClick = useLogout();
  const name = useStore(userStore, state => state.realName);

  return (
    <Dropdown menu={{items, onClick}}>
      <div className={css.user}>
        <Avatar src={face} alt='face' />
        <span data-testid='user_name'>{name}</span>
      </div>
    </Dropdown>
  );
};

export default User;
