Build Your PersonalDeveloper AI Avatar

/**
 * User profile component using our design system
 * @param userId - User identifier for data fetching
 * @param onEdit - Callback when user clicks edit
 */
interface UserProfileProps {
  userId: string
  onEdit: (user: User) => void
}

export const UserProfile: React.FC<UserProfileProps> = ({ 
  userId, 
  onEdit 
}) => {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(true)
  
  useEffect(() => {
    console.log("Fetching user profile:", userId)
    
    const fetchUser = async () => {
      try {
        const response = await fetch(`/api/users/${userId}`)
        if (!response.ok) throw new Error('Failed to fetch user')
        
        const userData = await response.json()
        setUser(userData)
        console.log("User profile loaded:", userData.id)
      } catch (error) {
        console.error("Failed to load user:", error)
        toast.error("Failed to load user profile")
      } finally {
        setLoading(false)
      }
    }
    
    fetchUser()
  }, [userId])
  
  if (loading) return <UserProfileSkeleton />
  if (!user) return <UserProfileError />
  
  return (
    <Card className="p-6 hover:shadow-md transition-shadow">
      <div className="flex items-start gap-4">
        <Avatar className="h-12 w-12 ring-2 ring-border">
          <AvatarImage src={user.avatar} alt={user.name} />
          <AvatarFallback className="bg-primary/10 text-primary">
            {user.name.charAt(0)}
          </AvatarFallback>
        </Avatar>
        
        <div className="flex-1 space-y-2">
          <div className="flex items-center gap-2">
            <h3 className="font-semibold text-lg">{user.name}</h3>
            <Badge variant={user.isActive ? "default" : "secondary"}>
              {user.isActive ? "Active" : "Inactive"}
            </Badge>
          </div>
          
          <p className="text-muted-foreground">{user.email}</p>
          
          <Button 
            variant="outline" 
            size="sm"
            onClick={() => onEdit(user)}
            className="mt-3"
          >
            Edit Profile
          </Button>
        </div>
      </div>
    </Card>
  )
}