import React, { useState, useRef, useEffect } from 'react'; import Image from 'next/image'; import { mergeClasses as cn } from '@/lib/styles/designSystem'; import { useTranslation } from '@/lib/hooks/useTranslation'; import type { AutheliaUser } from '@/lib/services/auth'; interface UserProfileProps { user: AutheliaUser; onLogout: () => void; className?: string; } export const UserProfile: React.FC = ({ user, onLogout, className, }) => { const [isOpen, setIsOpen] = useState(false); const dropdownRef = useRef(null); const buttonRef = useRef(null); const { t } = useTranslation(); const defaultAvatarSmall = `https://ui-avatars.com/api/?name=${encodeURIComponent(user.name)}&background=0ea5e9&color=fff&size=32`; const defaultAvatarLarge = `https://ui-avatars.com/api/?name=${encodeURIComponent(user.name)}&background=0ea5e9&color=fff&size=40`; const avatarSrc = user.avatar ?? defaultAvatarSmall; const avatarLargeSrc = user.avatar ?? defaultAvatarLarge; // Fermer la popup en cliquant à l'extérieur useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( dropdownRef.current && buttonRef.current && !dropdownRef.current.contains(event.target as Node) && !buttonRef.current.contains(event.target as Node) ) { setIsOpen(false); } }; document.addEventListener('mousedown', handleClickOutside); return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, []); const handleLogout = async () => { setIsOpen(false); onLogout(); }; return (
{/* Bouton Avatar */} {/* Popup Menu */} {isOpen && (
{/* Header avec informations utilisateur */}
{`Avatar

{user.name}

{user.email}

{/* Groupes utilisateur (si disponibles) */} {user.groups && user.groups.length > 0 && (

{t.user.groups}

{user.groups.map((group, index) => ( {group} ))}
)} {/* Actions */}
)}
); };