'use client'

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

interface UserProfileProps {
  isCollapsed: boolean
  user: {
    avatar?: string
    name: string
    role: string
  }
}

export function UserProfile({ isCollapsed, user }: UserProfileProps) {
  const getInitials = () => {
    return user.name.charAt(0).toUpperCase()
  }

  return (
    <div className="bg-white/5 backdrop-blur border border-white/30 rounded-xl mb-3 p-2.5 shadow-sm">
      {!isCollapsed ? (
        <div className="flex items-center space-x-2.5">
          <div className="relative flex-shrink-0">
            <Avatar className="w-7 h-7 border border-white/20">
              <AvatarImage src={user.avatar} alt={user.name} />
              <AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white text-xs font-semibold">
                {getInitials()}
              </AvatarFallback>
            </Avatar>
            <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 border-2 border-white/20 rounded-full"></div>
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-white font-medium text-sm truncate">
              {user.name}
            </p>
            <p className="text-white/60 text-xs truncate">{user.role}</p>
          </div>
        </div>
      ) : (
        <div className="flex justify-center">
          <Avatar className="w-8 h-8 border border-white/20">
            <AvatarImage src={user.avatar} alt={user.name} />
            <AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white text-xs font-semibold">
              {getInitials()}
            </AvatarFallback>
          </Avatar>
        </div>
      )}
    </div>
  )
}