import {Avatar, Dropdown, Space} 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';
import PassModal from './modal';
import {DownOutlined} from '@ant-design/icons';

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

  return (
    <>
      <Dropdown menu={{items, onClick}} arrow>
        <Space className={css.user} size='middle'>
          <Avatar src={face} alt='face' />
          <span data-testid='user_name'>{name}</span>
          <DownOutlined />
        </Space>
      </Dropdown>

      <PassModal visible={visible} onClose={onClose} />
    </>
  );
};

export default User;
