import { Popover } from 'antd';
import { useCurrentUser } from '../../auth/MeContext';
import { Logo } from '../../components/Logo';
import { userInfoRows } from './userInfo';

/** Логотип «АРМ КА»; по клику раскрывается блок с текущим пользователем и его ролями (`GET /me`). */
export function UserMenu({ compact = false }: { compact?: boolean }) {
	const me = useCurrentUser();
	const content = (
		<dl style={{ margin: 0, minWidth: 220 }} data-testid='user-info'>
			{userInfoRows(me).map((r) => (
				<div key={r.label} style={{ display: 'flex', gap: 8, padding: '2px 0' }}>
					<dt style={{ color: 'rgba(55, 65, 81, 0.6)', width: 110, flexShrink: 0 }}>{r.label}</dt>
					<dd style={{ margin: 0, fontWeight: 500, wordBreak: 'break-word' }}>{r.value}</dd>
				</div>
			))}
		</dl>
	);
	return (
		<Popover trigger='click' placement='bottomLeft' content={content}>
			<button type='button' title='Текущий пользователь' style={{ background: 'none', border: 0, padding: 0, cursor: 'pointer' }}>
				<Logo compact={compact} />
			</button>
		</Popover>
	);
}