import React from 'react';
import { User, Shield, UserRound } from 'lucide-react';
import { useLanguage } from '../contexts/LanguageContext';

interface UserInfoDisplayProps {
  currentUser: any;
}

export const UserInfoDisplay: React.FC<UserInfoDisplayProps> = ({ currentUser }) => {
  const { t } = useLanguage();

  if (!currentUser) {
    return null;
  }

  return (
    <div className="px-4 py-3 bg-slate-900 border-b border-slate-800">
      <div className="flex items-center gap-3">
        <div className="relative">
          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white">
            <UserRound size={18} />
          </div>
          {currentUser.isAdmin && (
            <div className="absolute -bottom-1 -right-1 bg-orange-500 rounded-full p-1 border-2 border-slate-900">
              <Shield size={10} className="text-white" />
            </div>
          )}
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <p className="text-sm font-medium text-white truncate">{currentUser.displayName || currentUser.username}</p>
            {currentUser.isAdmin && (
              <span className="text-xs px-2 py-0.5 bg-orange-500/20 text-orange-300 rounded-full border border-orange-500/30">
                {t('admin')}
              </span>
            )}
          </div>
          <p className="text-xs text-slate-400 truncate">
            ID: {currentUser.id?.substring(0, 8)}...
          </p>
        </div>
      </div>
    </div>
  );
};