src/components/Sidebar/UserInfo.jsx

// src/components/Sidebar/UserInfo.jsx
import React from 'react';

const UserInfo = ({ currentUser }) => {
  // Sử dụng ảnh mặc định nếu currentUser không có hoặc không có avatar
  const avatarUrl = currentUser?.avatar || `https://ui-avatars.com/api/?name=${currentUser?.name || 'User'}&background=ffffff&color=3b82f6`;
  const userName = currentUser?.name || 'Đang tải...';
  const userRole = currentUser?.role || 'Đang tải...';
  const userId = currentUser?.id || ''; // Giả sử currentUser có id

  return (
    <div className="flex items-center px-4 py-3 mb-6 bg-blue-700 bg-opacity-30 rounded-lg">
      <img
        id="user-avatar"
        className="w-10 h-10 rounded-full"
        src={avatarUrl}
        alt="User Avatar"
      />
      <div className="ml-3 flex-shrink-0">
        <p id="user-name" className="text-sm font-medium text-white bold">
          {userName}
        </p>
        <p id="user-role" className="text-xs text-blue-100 break-words">
          {userRole}
        </p>
        {userId && (
          <p
            id="user-id"
            className="text-xs text-blue-100 break-words"
            style={{ wordBreak: 'break-all' }}
          >
            {/* Có thể bạn không muốn hiển thị User ID ở đây, tùy theo thiết kế */}
            {/* ID: {userId} */}
          </p>
        )}
      </div>
    </div>
  );
};

export default UserInfo;